/** * UJUJ Theme - Main Stylesheet * Mobile-first, CSS custom properties, production-ready * * Design tokens (--color-*, --font-*, --text-*, --space-*, --radius-*, * --shadow-*, --ease-*, --duration-*) are defined in critical.css * and inlined in . This file references them only. * * @package Ujuj_Theme * @since 1.0.0 * * TABLE OF CONTENTS * ----------------- * 1. Base / Resets (extending critical.css) * 2. Container & Layout * 3. Typography * 4. Buttons * 5. Forms * 6. Header * 7. Mobile Menu * 8. Promo Bar * 9. Section Titles * 10. Hero Section * 11. Product Grid & Cards * 12. Subscription Cards * 13. Blog Cards * 14. Newsletter * 15. Free Resources Section * 16. Breadcrumbs * 17. Footer * 18. Shop Page * 19. Single Product * 20. Blog Single / Article * 21. Cart & Checkout * 22. My Account * 23. 404 Page * 24. Search * 25. Pagination * 26. Comments * 27. Widgets & Sidebar * 28. Utilities * 29. Animations & Keyframes * 30. Print Styles */ /* ========================================================================== 1. Base / Resets (extending critical.css) ========================================================================== */ ::selection { background: var(--color-primary); color: #fff; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } body.menu-open { overflow: hidden; } /* ========================================================================== 2. Container & Layout ========================================================================== */ .ujuj-container, .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--grid-gap); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--grid-gap); } .container-article { width: 100%; max-width: var(--container-article); margin-inline: auto; padding-inline: var(--grid-gap); } /* ========================================================================== 3. Typography ========================================================================== */ p { margin: 0 0 1.5em; } .lead, .has-large-font-size { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); } blockquote { margin: var(--space-xl) 0; padding: var(--space-lg) var(--space-xl); border-left: 4px solid var(--color-secondary); background: var(--color-secondary-light); font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--color-text); border-radius: 0 var(--radius) var(--radius) 0; } blockquote cite { display: block; margin-top: var(--space-md); font-size: var(--text-sm); font-style: normal; color: var(--color-text-muted); } code, pre { font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 0.875em; background: var(--color-accent-light); border-radius: var(--radius); } code { padding: 0.2em 0.4em; } pre { padding: var(--space-lg); overflow-x: auto; } /* ========================================================================== 4. Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem 1.75rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1; text-decoration: none; color: #fff; background: var(--color-primary); border: 2px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); white-space: nowrap; } .btn:hover { color: #fff; background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-color); } .btn:active { transform: translateY(0); box-shadow: none; } .btn svg { width: 1.125em; height: 1.125em; flex-shrink: 0; transition: transform var(--duration) var(--ease); } .btn:hover svg { transform: translateX(3px); } /* Primary (default, same as .btn) */ .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-hover); color: #fff; } /* Secondary / outline */ .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); } /* Accent / yellow */ .btn-accent { background: var(--color-accent); color: var(--color-text); border-color: var(--color-accent); } .btn-accent:hover { background: #e5a51e; color: var(--color-text); border-color: #e5a51e; box-shadow: 0 8px 24px rgba(245, 183, 49, 0.3); } /* Green */ .btn-green { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); } .btn-green:hover { background: var(--color-secondary-hover); color: #fff; border-color: var(--color-secondary-hover); box-shadow: 0 8px 24px rgba(45, 122, 111, 0.25); } /* Small */ .btn-sm { padding: 0.5rem 1.125rem; font-size: var(--text-xs); } /* Submit buttons (WordPress / WooCommerce) */ button[type="submit"], input[type="submit"], .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem 1.75rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1; text-decoration: none; color: #fff; background: var(--color-primary); border: none; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } button[type="submit"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover { color: #fff; background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-color); } /* ========================================================================== 5. Forms ========================================================================== */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select { width: 100%; padding: 0.875rem 1rem; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(232, 93, 58, 0.12); } input::placeholder, textarea::placeholder { color: var(--color-text-muted); } label { display: block; margin-bottom: var(--space-sm); font-weight: 600; color: var(--color-text); } /* ========================================================================== 6. Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 252, 247, 0.85); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform var(--duration-slow) var(--ease); } .site-header.is-hidden { transform: translateY(-100%); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 68px; max-width: var(--container); margin-inline: auto; padding-inline: var(--grid-gap); } /* Logo */ .logo { display: flex; align-items: center; flex-shrink: 0; } .logo a { display: flex; align-items: center; } .logo-img, .logo .custom-logo { height: 42px !important; max-height: 42px !important; width: auto !important; max-width: 180px !important; display: block; object-fit: contain; } .footer-logo .logo-img, .footer-logo .custom-logo { height: 36px !important; max-height: 36px !important; max-width: 160px !important; } /* Main Navigation */ .main-nav { display: none; } .main-nav-list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .main-nav li { position: relative; } .main-nav a { position: relative; display: flex; align-items: center; gap: 4px; padding: 0.5rem 0.75rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; transition: color var(--duration) var(--ease); white-space: nowrap; } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0.75rem; right: 0.75rem; height: 2px; background: var(--color-primary); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform var(--duration) var(--ease-spring); } .main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { color: var(--color-primary); } .main-nav a:hover::after, .main-nav .current-menu-item > a::after, .main-nav .current-menu-ancestor > a::after { transform: scaleX(1); } /* Submenu arrow — small chevron, no pill */ .submenu-arrow { flex-shrink: 0; opacity: 0.5; transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); } .main-nav li:hover > a .submenu-arrow { transform: rotate(180deg); opacity: 1; } /* Sub-menu dropdown */ .main-nav .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 100; min-width: 220px; padding: var(--space-sm) 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease), transform var(--duration) var(--ease); list-style: none; margin: 0; } .main-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .main-nav .sub-menu li { position: static; } .main-nav .sub-menu a { padding: 0.5rem 1.25rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); } .main-nav .sub-menu a::after { display: none; } .main-nav .sub-menu a:hover { color: var(--color-primary); background: var(--color-primary-light); } /* Header Actions */ .header-actions { display: flex; align-items: center; gap: var(--space-sm); } .header-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--color-text); background: transparent; border: none; border-radius: 50%; cursor: pointer; text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .header-icon:hover { background: var(--color-primary-light); color: var(--color-primary); } .header-icon svg { width: 22px; height: 22px; } /* Cart badge */ .cart-badge { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-family: var(--font-body); font-size: 0.625rem; font-weight: 800; color: #fff; background: var(--color-primary); border-radius: var(--radius-pill); line-height: 1; animation: popIn var(--duration) var(--ease-spring); } /* Hamburger */ .hamburger { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: transparent; border: none; cursor: pointer; border-radius: 50%; transition: background var(--duration) var(--ease); } .hamburger:hover { background: var(--color-primary-light); } .hamburger-line { display: block; width: 22px; height: 2px; background: var(--color-text); position: relative; transition: background var(--duration) var(--ease); } .hamburger-line::before, .hamburger-line::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-text); transition: transform var(--duration) var(--ease), top var(--duration) var(--ease); } .hamburger-line::before { top: -7px; } .hamburger-line::after { top: 7px; } .hamburger[aria-expanded="true"] .hamburger-line { background: transparent; } .hamburger[aria-expanded="true"] .hamburger-line::before { top: 0; transform: rotate(45deg); } .hamburger[aria-expanded="true"] .hamburger-line::after { top: 0; transform: rotate(-45deg); } /* Desktop breakpoint: show nav, hide hamburger */ @media (min-width: 901px) { .main-nav { display: flex; align-items: center; } .hamburger { display: none; } } /* ========================================================================== 7. Mobile Menu ========================================================================== */ .mobile-menu { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: var(--color-bg); opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity var(--duration-slow) var(--ease), visibility var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease-spring); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu.open { opacity: 1; visibility: visible; transform: scale(1); } .mobile-menu nav { text-align: center; padding: var(--space-xl); } .mobile-menu ul { list-style: none; margin: 0; padding: 0; } .mobile-menu li { margin-bottom: var(--space-sm); } .mobile-menu a { display: inline-block; padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--color-text); text-decoration: none; transition: color var(--duration) var(--ease), transform var(--duration) var(--ease); } .mobile-menu a:hover { color: var(--color-primary); transform: translateX(4px); } .mobile-menu .current-menu-item > a { color: var(--color-primary); } /* Submenu arrow rotation for parent items */ .mobile-menu .has-submenu > a { position: relative; } .mobile-menu .has-submenu > a .submenu-arrow { display: inline-block; transition: transform var(--duration) var(--ease); margin-left: var(--space-xs); } .mobile-menu .has-submenu.submenu-open > a .submenu-arrow { transform: rotate(180deg); } /* Submenu: hidden by default, revealed on toggle */ .mobile-menu .sub-menu { padding-left: 0; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease); } .mobile-menu .has-submenu.submenu-open > .sub-menu { max-height: 500px; } .mobile-menu .sub-menu li { margin-bottom: 0; } .mobile-menu .sub-menu a { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 500; color: var(--color-text-muted); padding: var(--space-xs) var(--space-md); } .mobile-menu .sub-menu a:hover { color: var(--color-primary); } /* ========================================================================== 8. Promo Bar ========================================================================== */ .promo-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--grid-gap); background: var(--color-secondary); color: #fff; font-size: var(--text-sm); font-weight: 600; text-align: center; line-height: 1.4; } .promo-bar a { color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } .promo-bar a:hover { color: var(--color-accent); } .promo-bar span { color: var(--color-accent); font-weight: 800; } /* ========================================================================== 9. Section Titles ========================================================================== */ .section { padding: var(--space-3xl) 0; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); flex-wrap: wrap; } .section-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin: 0; line-height: 1.2; } .section-title .highlight { position: relative; display: inline-block; } .section-title .highlight::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 0.3em; background: var(--color-accent); opacity: 0.4; border-radius: 2px; z-index: -1; } .section-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; transition: gap var(--duration) var(--ease); } .section-link:hover { color: var(--color-primary-hover); gap: var(--space-sm); } .section-link svg { width: 18px; height: 18px; transition: transform var(--duration) var(--ease); } .section-link:hover svg { transform: translateX(3px); } /* ========================================================================== 10. Hero Section ========================================================================== */ .hero { position: relative; overflow: hidden; padding: var(--space-3xl) 0 var(--space-2xl); background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(232,93,58,0.06) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(45,122,111,0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(245,183,49,0.04) 0%, transparent 60%), var(--color-bg); } /* Atmospheric orbs — soft, slow, organic */ .hero-atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero-orb { display: block; position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; } .hero-orb--warm { width: 340px; height: 340px; background: var(--color-primary); opacity: 0.08; top: -8%; right: 5%; animation: blobFloat 14s ease-in-out infinite; } .hero-orb--green { width: 280px; height: 280px; background: var(--color-secondary); opacity: 0.07; bottom: -5%; left: -3%; animation: blobFloat 18s ease-in-out infinite reverse; } .hero-orb--gold { width: 200px; height: 200px; background: var(--color-accent); opacity: 0.1; top: 50%; left: 45%; animation: blobFloat 16s ease-in-out infinite 2s; } .hero-orb--pink { width: 180px; height: 180px; background: var(--color-pink); opacity: 0.06; top: 15%; left: 60%; animation: blobFloat 20s ease-in-out infinite 5s; } /* Hero layout */ .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; } /* Badge */ .hero-badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 6px var(--space-md) 6px 6px; font-size: var(--text-xs); font-weight: 800; color: var(--color-secondary); background: var(--color-secondary-light); border-radius: var(--radius-pill); margin-bottom: var(--space-lg); letter-spacing: 0.03em; text-transform: uppercase; animation: slideUp var(--duration-slow) var(--ease-out) both; } .hero-badge__dot { display: block; width: 8px; height: 8px; background: var(--color-secondary); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } /* Title */ .hero h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700; line-height: 1.05; color: var(--color-text); margin: 0 0 var(--space-lg); letter-spacing: -0.02em; animation: slideUp var(--duration-slow) var(--ease-out) 80ms both; } .hero h1 em { font-style: italic; position: relative; white-space: nowrap; } .hero h1 em::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 0.3em; border-radius: 3px; z-index: -1; opacity: 0.45; } .hero h1 em:first-of-type { color: var(--color-primary); } .hero h1 em:first-of-type::after { background: var(--color-primary); opacity: 0.15; } .hero h1 em:last-of-type { color: var(--color-secondary); } .hero h1 em:last-of-type::after { background: var(--color-accent); opacity: 0.4; } /* Subtitle */ .hero-sub { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.65; margin: 0 0 var(--space-xl); max-width: 500px; animation: slideUp var(--duration-slow) var(--ease-out) 160ms both; } /* Actions */ .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); animation: slideUp var(--duration-slow) var(--ease-out) 240ms both; } /* Social proof */ .hero-proof { display: flex; align-items: center; gap: var(--space-sm); animation: slideUp var(--duration-slow) var(--ease-out) 320ms both; } .hero-proof__stars { display: flex; gap: 2px; color: var(--color-accent); } .hero-proof__stars svg { fill: var(--color-accent); } .hero-proof__text { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); } /* ---- Game scene: floating emoji pieces ---- */ .hero-scene { position: relative; width: 100%; min-height: 300px; animation: slideUp var(--duration-slow) var(--ease-out) 350ms both; } .hero-piece { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; } .hero-piece > span:first-child { font-size: 3rem; line-height: 1; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.1)); } .hero-piece__label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; color: var(--color-text); background: var(--color-surface); padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); } .hero-piece:hover .hero-piece__label { opacity: 1; transform: translateY(0); } /* Piece positions and animations */ .hero-piece--dice { top: 8%; left: 12%; animation: heroPieceBob 5s ease-in-out infinite; } .hero-piece--dice > span:first-child { font-size: 4rem; filter: drop-shadow(0 10px 25px rgba(232,93,58,0.25)); } .hero-piece--book { top: 5%; right: 15%; animation: heroPieceBob 6s ease-in-out infinite -1.5s; } .hero-piece--book > span:first-child { font-size: 3.5rem; filter: drop-shadow(0 10px 25px rgba(124,92,186,0.25)); } .hero-piece--art { bottom: 15%; left: 25%; animation: heroPieceBob 5.5s ease-in-out infinite -3s; } .hero-piece--art > span:first-child { font-size: 3.5rem; filter: drop-shadow(0 10px 25px rgba(45,122,111,0.25)); } .hero-piece--puzzle { top: 40%; left: 55%; animation: heroPieceSpin 8s linear infinite; } .hero-piece--puzzle > span:first-child { font-size: 2.2rem; opacity: 0.7; } .hero-piece--crayon { bottom: 25%; right: 10%; animation: heroPieceBob 7s ease-in-out infinite -2s; } .hero-piece--crayon > span:first-child { font-size: 2rem; opacity: 0.6; transform: rotate(-15deg); } .hero-piece--star { top: 55%; left: 5%; animation: heroPiecePulse 3s ease-in-out infinite; } .hero-piece--star > span:first-child { font-size: 1.6rem; opacity: 0.5; } .hero-piece--bulb { top: 20%; left: 50%; animation: heroPieceBob 6.5s ease-in-out infinite -4s; } .hero-piece--bulb > span:first-child { font-size: 1.8rem; opacity: 0.5; } /* Hero piece keyframes */ @keyframes heroPieceBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-12px) rotate(3deg); } 75% { transform: translateY(8px) rotate(-2deg); } } @keyframes heroPieceSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes heroPiecePulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.8; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ---- Responsive ---- */ @media (min-width: 768px) { .hero { padding: var(--space-4xl) 0 var(--space-3xl); } .hero-content { grid-template-columns: 1fr 1fr; min-height: 420px; } .hero-scene { min-height: 420px; } .hero-piece--dice > span:first-child { font-size: 5rem; } .hero-piece--book > span:first-child { font-size: 4.5rem; } .hero-piece--art > span:first-child { font-size: 4rem; } .hero-piece--puzzle > span:first-child { font-size: 2.8rem; } .hero-piece--crayon > span:first-child { font-size: 2.5rem; } .hero-piece--star > span:first-child { font-size: 2rem; } .hero-piece--bulb > span:first-child { font-size: 2.2rem; } } @media (min-width: 1024px) { .hero-scene { min-height: 480px; } .hero-piece--dice { top: 5%; left: 10%; } .hero-piece--book { top: 2%; right: 12%; } .hero-piece--art { bottom: 10%; left: 20%; } .hero-piece--puzzle { top: 35%; left: 58%; } .hero-piece--crayon { bottom: 20%; right: 5%; } .hero-piece--star { top: 60%; left: 2%; } .hero-piece--bulb { top: 18%; left: 45%; } } /* ========================================================================== 11. Product Grid & Cards ========================================================================== */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } /* Product Card */ .product-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } /* Product Image */ .product-image { position: relative; overflow: hidden; background: var(--color-bg); } .product-image__wrapper { aspect-ratio: 4 / 3; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .product-card:hover .product-image img { transform: scale(1.06); } /* Colour backgrounds for product images */ .bg-warm { background: linear-gradient(135deg, #FFF0EC 0%, #FFF8F5 100%); } .bg-sky { background: linear-gradient(135deg, #EBF5FB 0%, #F4FAFF 100%); } .bg-green { background: linear-gradient(135deg, #E6F5F2 0%, #F0FAF8 100%); } .bg-purple { background: linear-gradient(135deg, #F3EEFB 0%, #F9F6FD 100%); } .bg-accent { background: linear-gradient(135deg, #FFF8E6 0%, #FFFDF5 100%); } .bg-pink { background: linear-gradient(135deg, #FDF0F4 0%, #FEF7F9 100%); } /* Product Badge */ .product-badge { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 0.3rem 0.75rem; font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius-pill); line-height: 1.2; } .badge-new { background: var(--color-primary); color: #fff; } .badge-sale { background: var(--color-secondary); color: #fff; } .badge-popular { background: var(--color-accent); color: var(--color-text); } .badge-digital { background: var(--color-purple); color: #fff; } /* Product Info */ .product-info { display: flex; flex-direction: column; flex: 1; padding: var(--space-md); } .product-category { display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-xs); } .product-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; line-height: 1.3; color: var(--color-text); margin: 0 0 var(--space-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card:hover .product-name { color: var(--color-primary); } /* Product Price */ .product-price { display: flex; align-items: baseline; gap: var(--space-sm); margin-top: auto; margin-bottom: var(--space-sm); } .price-current { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); } .price-old { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); text-decoration: line-through; } /* Add-to-cart button */ .product-add-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; padding: 0.625rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); background: var(--color-primary-light); border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .product-add-btn:hover { background: var(--color-primary); color: #fff; } /* ========================================================================== 12. Subscription Cards ========================================================================== */ .sub-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: start; } @media (min-width: 768px) { .sub-grid { grid-template-columns: repeat(3, 1fr); } } .sub-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-2xl) var(--space-xl); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-xl); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .sub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* Featured sub card */ .sub-card.is-featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .sub-card.is-featured::before { content: 'Le + populaire'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); font-weight: 800; color: #fff; background: var(--color-primary); border-radius: var(--radius-pill); white-space: nowrap; } .sub-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-lg); font-size: 2rem; background: var(--color-primary-light); border-radius: var(--radius-lg); } .sub-card.is-featured .sub-icon { background: var(--color-primary); color: #fff; } .sub-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-xs); } .sub-tagline { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-lg); } .sub-price { margin-bottom: var(--space-lg); } .sub-price .amount { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--color-text); } .sub-price .period { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; } .sub-features { list-style: none; margin: 0 0 var(--space-xl); padding: 0; text-align: left; width: 100%; } .sub-features li { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; font-size: var(--text-sm); color: var(--color-text); } .sub-features li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232D7A6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .sub-card .btn { width: 100%; margin-top: auto; } /* ========================================================================== 12b. Subscription Cards v2 (homepage redesign) ========================================================================== */ /* Section-level utilities used by subscriptions */ .section-header--centered { flex-direction: column; align-items: center; text-align: center; } .section-subtitle { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.65; max-width: 560px; } .section-header--centered .section-subtitle { text-align: center; } .sub-section-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.4rem 1rem; background: var(--color-accent-light); border: 1.5px solid rgba(245,183,49,.25); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; color: var(--color-accent); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--space-sm); } /* Background atmosphere */ .section--subscriptions { position: relative; overflow: hidden; } .sub-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .sub-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .15; animation: sub-float 16s ease-in-out infinite; } .sub-orb--1 { width: 450px; height: 450px; top: -100px; right: -80px; background: var(--color-primary); } .sub-orb--2 { width: 350px; height: 350px; bottom: -80px; left: -60px; background: var(--color-secondary); animation-delay: -8s; } @keyframes sub-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(25px, -18px) scale(1.04); } 66% { transform: translate(-12px, 12px) scale(0.97); } } .section--subscriptions > .container { position: relative; z-index: 1; } /* Grid v2 */ .sub-grid-v2 { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: start; } @media (min-width: 768px) { .sub-grid-v2 { grid-template-columns: repeat(3, 1fr); } } /* Card v2 base */ .sub-card-v2 { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-2xl) var(--space-xl) var(--space-xl); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-xl); transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease), border-color var(--duration) var(--ease); } .sub-card-v2:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } /* Ribbon (age badge) */ .sub-card-v2__ribbon { position: absolute; top: var(--space-md); right: var(--space-md); padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; } /* "Le + populaire" badge */ .sub-card-v2__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); font-weight: 800; color: #fff; border-radius: var(--radius-pill); white-space: nowrap; letter-spacing: .02em; } /* Icon */ .sub-card-v2__icon { font-size: 2.6rem; line-height: 1; margin-bottom: var(--space-md); filter: drop-shadow(0 2px 4px rgba(0,0,0,.06)); transition: transform var(--duration-slow) var(--ease-spring); } .sub-card-v2:hover .sub-card-v2__icon { transform: scale(1.12) rotate(-4deg); } /* Name */ .sub-card-v2__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--color-text); margin: 0 0 var(--space-xs); } /* Tagline */ .sub-card-v2__tagline { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; margin: 0 0 var(--space-lg); max-width: 280px; } /* Price */ .sub-card-v2__price { display: flex; align-items: baseline; gap: 2px; margin-bottom: var(--space-lg); } .sub-card-v2__amount { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 900; line-height: 1; } .sub-card-v2__period { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; } /* Features */ .sub-card-v2__features { list-style: none; margin: 0 0 var(--space-xl); padding: 0; text-align: left; width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); } .sub-card-v2__features li { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; } .sub-card-v2__features li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 10px; } /* CTA */ .sub-card-v2__cta { width: 100%; margin-top: auto; } /* Reassurance line */ .sub-reassurance { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); } .sub-reassurance svg { color: var(--color-secondary); flex-shrink: 0; } /* ── Variant: Warm (Ouistitis) ── */ .sub-card-v2--warm { border-color: rgba(232,93,58,.15); background: linear-gradient(175deg, #fff 0%, var(--color-primary-light) 100%); } .sub-card-v2--warm:hover { border-color: rgba(232,93,58,.3); box-shadow: 0 16px 48px rgba(232,93,58,.12), 0 4px 12px rgba(0,0,0,.04); } .sub-card-v2--warm .sub-card-v2__ribbon { background: var(--color-primary-light); color: var(--color-primary); } .sub-card-v2--warm .sub-card-v2__amount { color: var(--color-primary); } .sub-card-v2--warm .sub-card-v2__features li::before { background-color: var(--color-primary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E85D3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* ── Variant: Featured (Académie) ── */ .sub-card-v2--featured { border-color: rgba(245,183,49,.3); background: linear-gradient(175deg, #fff 0%, var(--color-accent-light) 100%); box-shadow: 0 8px 32px rgba(245,183,49,.12); z-index: 2; } .sub-card-v2--featured:hover { border-color: rgba(245,183,49,.5); box-shadow: 0 16px 48px rgba(245,183,49,.18), 0 4px 12px rgba(0,0,0,.04); } .sub-card-v2--featured .sub-card-v2__badge { background: var(--color-accent); color: var(--color-text); } .sub-card-v2--featured .sub-card-v2__ribbon { background: var(--color-accent-light); color: #b8860b; } .sub-card-v2--featured .sub-card-v2__amount { color: var(--color-accent); } .sub-card-v2--featured .sub-card-v2__features li::before { background-color: var(--color-accent-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* ── Variant: Green (Ressources Illimitées) ── */ .sub-card-v2--green { border-color: rgba(45,122,111,.15); background: linear-gradient(175deg, #fff 0%, var(--color-secondary-light) 100%); } .sub-card-v2--green:hover { border-color: rgba(45,122,111,.3); box-shadow: 0 16px 48px rgba(45,122,111,.12), 0 4px 12px rgba(0,0,0,.04); } .sub-card-v2--green .sub-card-v2__ribbon { background: var(--color-secondary-light); color: var(--color-secondary); } .sub-card-v2--green .sub-card-v2__amount { color: var(--color-secondary); } .sub-card-v2--green .sub-card-v2__features li::before { background-color: var(--color-secondary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D7A6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* ── Card v2 scale on desktop ── */ @media (min-width: 768px) { .sub-card-v2--featured { transform: scale(1.04); } .sub-card-v2--featured:hover { transform: scale(1.04) translateY(-6px); } } /* ========================================================================== 13. Blog Cards ========================================================================== */ .blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); } @media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .blog-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; border: 1.5px solid var(--color-border); text-decoration: none; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .blog-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .blog-card:hover .blog-image img { transform: scale(1.05); } .blog-tag { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: 0.25rem 0.75rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); background: rgba(255, 252, 247, 0.92); backdrop-filter: blur(8px); border-radius: var(--radius-pill); } .blog-content { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg); } .blog-date { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .blog-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-sm); line-height: 1.3; } .blog-card:hover .blog-title { color: var(--color-primary); } .blog-excerpt { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== Home Tabs (Popular / New products) ========================================================================== */ .home-tabs-nav { display: flex; gap: var(--space-sm); margin-bottom: var(--space-xl); } .home-tab { padding: 0.6rem 1.5rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); background: transparent; border: 2px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease); } .home-tab:hover { color: var(--color-text); border-color: var(--color-text-muted); } .home-tab.active { color: var(--color-surface); background: var(--color-primary); border-color: var(--color-primary); } .home-tab-panel { display: none; } .home-tab-panel.active { display: block; } /* ========================================================================== Popular Posts List ========================================================================== */ /* ── Popular posts — editorial grid ── */ .section--popular-posts { background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(232,93,58,.04) 0%, transparent 70%), var(--color-bg); } .pop-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--grid-gap); } /* Hero card spans full width */ .pop-hero { grid-column: 1 / -1; } .pop-hero__link { display: block; position: relative; border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; color: #fff; } .pop-hero__img { aspect-ratio: 21 / 9; overflow: hidden; } .pop-hero__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .pop-hero__link:hover .pop-hero__img img { transform: scale(1.04); } .pop-hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-xl); background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, transparent 70%); } .pop-hero__text { flex: 1; min-width: 0; } .pop-hero__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: #fff; margin: 0 0 var(--space-sm); line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.3); } /* Rank numbers */ .pop-rank { font-family: var(--font-display); font-weight: 900; line-height: 1; opacity: .15; pointer-events: none; user-select: none; } .pop-hero .pop-rank { position: absolute; top: var(--space-md); left: var(--space-xl); font-size: clamp(6rem, 10vw, 10rem); color: #fff; z-index: 1; } /* Category pill */ .pop-cat { display: inline-block; padding: 0.2rem 0.65rem; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-sm); } .pop-card .pop-cat { background: var(--color-primary-light); color: var(--color-primary); backdrop-filter: none; } /* Meta line */ .pop-meta { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); opacity: .7; } .pop-comments { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; opacity: 1; } .pop-hero .pop-comments { color: var(--color-accent); opacity: 1; } /* ── Cards #2-#5 ── */ .pop-card { position: relative; } .pop-card__link { display: flex; gap: var(--space-md); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease), border-color var(--duration) var(--ease); height: 100%; align-items: center; } .pop-card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(232,93,58,.15); color: var(--color-text); } .pop-card .pop-rank { position: absolute; top: -6px; right: var(--space-md); font-size: 3.2rem; color: var(--color-text); z-index: 1; } .pop-card:nth-child(2) .pop-rank { color: var(--color-primary); opacity: .12; } .pop-card:nth-child(3) .pop-rank { color: var(--color-accent); opacity: .18; } .pop-card:nth-child(4) .pop-rank { color: var(--color-secondary); opacity: .15; } .pop-card:nth-child(5) .pop-rank { color: var(--color-purple); opacity: .15; } .pop-card__img { flex-shrink: 0; width: 90px; height: 90px; border-radius: var(--radius); overflow: hidden; } .pop-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .pop-card__link:hover .pop-card__img img { transform: scale(1.08); } .pop-card__body { flex: 1; min-width: 0; } .pop-card__title { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; line-height: 1.35; margin: 0 0 var(--space-xs); color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pop-card .pop-meta { color: var(--color-text-muted); } .pop-card .pop-comments { color: var(--color-primary); } /* Footer CTA */ .pop-footer { text-align: center; margin-top: var(--space-xl); } /* ── Responsive ── */ @media (max-width: 700px) { .pop-grid { grid-template-columns: 1fr; } .pop-hero__img { aspect-ratio: 16 / 10; } .pop-hero__title { font-size: var(--text-xl); } .pop-hero .pop-rank { font-size: 5rem; } .pop-card__img { width: 72px; height: 72px; } } @media (min-width: 701px) { .pop-card__img { width: 100px; height: 100px; border-radius: var(--radius-lg); } .pop-card__title { font-size: var(--text-lg); } } /* ========================================================================== 14. Newsletter ========================================================================== */ .newsletter { position: relative; padding: var(--space-3xl) 0; background: var(--color-text); color: #fff; overflow: hidden; } .newsletter::before { content: ''; position: absolute; top: -50%; left: -20%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(232, 93, 58, 0.15) 0%, transparent 70%); pointer-events: none; } .newsletter::after { content: ''; position: absolute; bottom: -40%; right: -15%; width: 50%; height: 180%; background: radial-gradient(ellipse, rgba(45, 122, 111, 0.12) 0%, transparent 70%); pointer-events: none; } .newsletter .section-title { color: #fff; } .newsletter p { color: rgba(255, 255, 255, 0.7); } .newsletter-form { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 500px; margin-inline: auto; position: relative; z-index: 1; } .newsletter-form input[type="email"] { flex: 1; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; border-radius: var(--radius-pill); padding: 1rem 1.5rem; } .newsletter-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); } .newsletter-form input[type="email"]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(232, 93, 58, 0.2); } .newsletter-form button { border-radius: var(--radius-pill); } @media (min-width: 480px) { .newsletter-form { flex-direction: row; } } /* ========================================================================== 15. Free Resources Section ========================================================================== */ .section--free-resources { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 50% at 10% 90%, rgba(45,122,111,0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 90% 20%, rgba(245,183,49,0.05) 0%, transparent 60%), var(--color-secondary-light); } .free-resources-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='%232D7A6F' opacity='.06'/%3E%3C/svg%3E") repeat; pointer-events: none; } .free-resources-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 5px var(--space-md); font-size: var(--text-xs); font-weight: 800; color: var(--color-secondary); background: rgba(255,255,255,0.8); border: 1.5px solid rgba(45,122,111,0.15); border-radius: var(--radius-pill); margin-bottom: var(--space-md); letter-spacing: 0.03em; text-transform: uppercase; backdrop-filter: blur(4px); } .free-resources-desc { font-size: var(--text-base); color: var(--color-text-muted); max-width: 440px; line-height: 1.6; } /* Grid */ .free-resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } @media (min-width: 640px) { .free-resources-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .free-resources-grid { grid-template-columns: repeat(6, 1fr); } } /* Card */ .free-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; border: 1.5px solid rgba(45,122,111,0.1); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); } .free-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-secondary); } /* Card image */ .free-card__image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, var(--color-secondary-light) 0%, #F0FAF8 100%); } .free-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .free-card:hover .free-card__image img { transform: scale(1.06); } /* Gratuit badge */ .free-card__badge { position: absolute; top: var(--space-sm); right: var(--space-sm); padding: 3px 10px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--color-secondary); border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(45,122,111,0.3); } /* Card body */ .free-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; } .free-card__title { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .free-card__cta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 700; color: var(--color-secondary); margin-top: auto; transition: gap var(--duration) var(--ease); } .free-card__cta svg { width: 14px; height: 14px; transition: transform var(--duration) var(--ease); } .free-card:hover .free-card__cta { gap: 8px; } .free-card:hover .free-card__cta svg { transform: translateY(2px); } /* ========================================================================== 16. Breadcrumbs ========================================================================== */ .breadcrumbs { padding: var(--space-md) 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .breadcrumbs li { display: inline-flex; align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); } .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; transition: color var(--duration) var(--ease); } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs li:last-child { color: var(--color-text); font-weight: 600; } .breadcrumbs-sep { display: inline-flex; align-items: center; margin: 0 var(--space-xs); color: var(--color-border); } .breadcrumbs-sep svg { width: 14px; height: 14px; } /* ========================================================================== 17. Footer ========================================================================== */ /* ── Footer — warm editorial ── */ .site-footer { margin-top: auto; position: relative; padding: 0 0 var(--space-lg); background: var(--color-surface); color: var(--color-text); border-top: 3px solid var(--color-primary); } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, rgba(232,93,58,.03) 0%, transparent 100%); pointer-events: none; } .site-footer a { color: var(--color-text-muted); text-decoration: none; transition: color var(--duration) var(--ease), transform var(--duration) var(--ease); } .site-footer a:hover { color: var(--color-primary); } .footer-inner { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-2xl) var(--space-xl); padding: var(--space-2xl) 0; } @media (min-width: 640px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .footer-inner { grid-template-columns: 1.6fr repeat(3, 1fr); } } .footer-col { min-width: 0; } /* Brand column */ .footer-col--brand { padding-right: var(--space-xl); } .footer-logo { display: inline-block; margin-bottom: var(--space-md); } .footer-logo .logo-img, .footer-logo .custom-logo { height: 42px; width: auto; } .footer-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-lg); max-width: 300px; } /* Widget columns */ .footer-col .widget-title, .footer-col h4 { margin-bottom: var(--space-md); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; color: var(--color-text); text-transform: uppercase; letter-spacing: .06em; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 0; } .footer-col li a { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; font-size: var(--text-sm); font-weight: 500; position: relative; } .footer-col li a::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--color-primary); transition: width var(--duration) var(--ease); } .footer-col li a:hover::before { width: 100%; } /* Social links */ .footer-social { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); } .social-links { display: flex; align-items: center; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .social-links li { margin: 0; } .social-links a, .footer-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius); color: var(--color-text-muted); transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease-spring); } .social-links a:hover, .footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-3px); } .social-links a::before { display: none; } .footer-social a svg, .social-links a svg { width: 16px; height: 16px; } /* Bottom bar */ .footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); } @media (min-width: 640px) { .footer-bottom { flex-direction: row; } } .footer-bottom p { margin: 0; } .footer-links { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; } .footer-links li { margin: 0; } .footer-links a { font-size: var(--text-xs); font-weight: 600; padding: 0; } .footer-links a::before { display: none; } .footer-links a:hover { color: var(--color-primary); } /* ========================================================================== 18. Shop / Category Page ========================================================================== */ /* --- Category Header --- */ .cat-header { padding: var(--space-xl) 0 var(--space-lg); } .cat-header__intro { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; } .cat-header__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin: 0; letter-spacing: -0.01em; } .cat-header__count { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); padding: 0.25rem 0.75rem; background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-pill); } .cat-header .term-description, .cat-header .page-description { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; max-width: 600px; } .cat-header .term-description p { margin: 0; } /* --- Toolbar (tabs + sort) --- */ .cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-border); } .cat-toolbar__sort { display: flex; align-items: center; gap: var(--space-sm); } /* --- Filter Tabs --- */ .cat-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; } .cat-tab { display: inline-flex; align-items: center; padding: 0.45rem 1.1rem; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .cat-tab:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); } .cat-tab--on { color: #fff; background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(232, 93, 58, 0.25); } .cat-tab--back { gap: 0.375rem; color: var(--color-text-muted); border-style: dashed; } .cat-tab--back:hover { border-style: solid; } @media (max-width: 639px) { .cat-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; } .cat-tabs::-webkit-scrollbar { display: none; } .cat-tab { white-space: nowrap; flex-shrink: 0; } } /* --- Product Cards (pcard) --- */ .pcard { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; list-style: none; box-shadow: 0 1px 4px rgba(43, 35, 56, 0.06); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .pcard__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } /* Visual / Image */ .pcard__visual { position: relative; overflow: hidden; background: var(--color-bg); aspect-ratio: 4 / 3; } .pcard__visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .pcard:hover .pcard__visual img { transform: scale(1.06); } /* Badges */ .pcard__badge { position: absolute; top: 0.625rem; left: 0.625rem; z-index: 2; padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius); line-height: 1.3; } .pcard__badge--sale { background: var(--color-accent); color: var(--color-text); } .pcard__badge--fav { background: var(--color-pink); color: #fff; } /* Body */ .pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.25rem 1.25rem; } /* Category tag */ .pcard__cat { display: inline-block; width: fit-content; padding: 0.15rem 0.5rem; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; margin-bottom: 0.5rem; line-height: 1.4; } .pcard__cat--warm { background: var(--color-primary-light); color: var(--color-primary); } .pcard__cat--green { background: var(--color-secondary-light); color: var(--color-secondary); } .pcard__cat--sky { background: var(--color-sky-light); color: var(--color-sky); } .pcard__cat--purple { background: var(--color-purple-light); color: var(--color-purple); } .pcard__cat--pink { background: var(--color-pink-light); color: var(--color-pink); } .pcard__cat--accent { background: var(--color-accent-light); color: #9A7B00; } /* Title */ .pcard__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; line-height: 1.35; color: var(--color-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--duration) var(--ease); } .pcard:hover .pcard__title { color: var(--color-primary); } /* Bottom row: price + CTA */ .pcard__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.75rem; } .pcard__price { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 800; color: var(--color-secondary); } .pcard__price del { color: var(--color-text-muted); font-weight: 400; font-size: var(--text-xs); margin-right: 0.25rem; opacity: 0.6; } .pcard__price ins { text-decoration: none; color: var(--color-primary); font-weight: 800; } .pcard__cta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); } .pcard:hover .pcard__cta { opacity: 1; transform: translateX(0); } /* Sort Select */ .sort-select { appearance: none; padding: 0.5rem 2.25rem 0.5rem 1rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7189' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; width: auto; } .sort-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(232, 93, 58, 0.12); } /* --- Shop page layout --- */ .shop-page { padding: var(--space-md) 0 var(--space-3xl); } /* ========================================================================== 19. Single Product ========================================================================== */ .single-product-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; padding: var(--space-xl) 0; } @media (min-width: 768px) { .single-product-layout { grid-template-columns: 1fr 1fr; } } /* Gallery */ .product-gallery { position: relative; } @media (min-width: 768px) { .product-gallery { position: sticky; top: 88px; } } .product-gallery .main-image { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-md); } .product-gallery .main-image img { width: 100%; height: auto; border-radius: var(--radius-xl); } .product-thumbnails { display: flex; gap: var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .product-thumbnails button { flex-shrink: 0; width: 72px; height: 72px; padding: 0; border: 2px solid var(--color-border); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: none; transition: border-color var(--duration) var(--ease); } .product-thumbnails button.is-active, .product-thumbnails button:hover { border-color: var(--color-primary); } .product-thumbnails button img { width: 100%; height: 100%; object-fit: cover; } /* Product Details */ .product-details { padding: var(--space-md) 0; } /* Trust Badges */ .trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-lg); background: var(--color-secondary-light); border-radius: var(--radius-lg); margin-top: var(--space-xl); } .trust-badges .trust-item { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); font-weight: 600; color: var(--color-secondary); } .trust-badges .trust-item svg { width: 20px; height: 20px; flex-shrink: 0; } /* Product Tabs */ .product-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-xl); } .product-tab { position: relative; padding: var(--space-md) var(--space-lg); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); background: none; border: none; cursor: pointer; transition: color var(--duration) var(--ease); } .product-tab::after { content: ''; position: absolute; bottom: -2px; left: var(--space-lg); right: var(--space-lg); height: 2.5px; background: transparent; border-radius: 2px; transition: background var(--duration) var(--ease); } .product-tab:hover { color: var(--color-text); } .product-tab.is-active { color: var(--color-primary); } .product-tab.is-active::after { background: var(--color-primary); } .product-tab-content { display: none; } .product-tab-content.is-active { display: block; animation: fadeIn var(--duration) var(--ease-out); } .product-tab-content p { line-height: 1.7; color: var(--color-text-muted); } /* Product Meta Grid */ .product-meta-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } @media (min-width: 480px) { .product-meta-grid { grid-template-columns: repeat(2, 1fr); } } .product-meta-grid .meta-item { display: flex; align-items: flex-start; gap: var(--space-sm); } .product-meta-grid .meta-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; } .product-meta-grid .meta-value { font-size: var(--text-sm); color: var(--color-text-muted); } /* ========================================================================== 20. Blog Single / Article ========================================================================== */ /* Article Header */ .article-header { padding: var(--space-2xl) 0 var(--space-xl); text-align: center; } .article-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .article-tags a, .article-tags span { display: inline-block; padding: 0.25rem 0.75rem; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-pill); text-decoration: none; } /* Tag color variants */ .article-tags .tag-orange { color: var(--color-primary); background: var(--color-primary-light); } .article-tags .tag-green { color: var(--color-secondary); background: var(--color-secondary-light); } .article-tags .tag-purple { color: var(--color-purple); background: var(--color-purple-light); } .article-tags .tag-sky { color: var(--color-sky); background: var(--color-sky-light); } .article-tags .tag-pink { color: var(--color-pink); background: var(--color-pink-light); } .article-tags .tag-accent { color: #a17a15; background: var(--color-accent-light); } .article-hero-image { margin: 0 0 var(--space-2xl); border-radius: var(--radius-xl); overflow: hidden; } .article-hero-image img { width: 100%; height: auto; display: block; } /* Article Content (typography) */ .article-content { font-size: var(--text-base); line-height: 1.8; color: var(--color-text); } .article-content > *:first-child { margin-top: 0; } .article-content > *:last-child { margin-bottom: 0; } .article-content p { margin-bottom: 1.6em; } .article-content h2 { font-size: var(--text-2xl); margin: 2.5em 0 0.75em; } .article-content h3 { font-size: var(--text-xl); margin: 2em 0 0.75em; } .article-content ul, .article-content ol { padding-left: 1.5em; margin-bottom: 1.6em; } .article-content li { margin-bottom: 0.5em; line-height: 1.7; } .article-content ul li::marker { color: var(--color-primary); } .article-content ol li::marker { color: var(--color-primary); font-weight: 700; } .article-content blockquote { margin: 2em 0; padding: var(--space-lg) var(--space-xl); border-left: 4px solid var(--color-primary); background: var(--color-primary-light); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--color-text); } .article-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-lg) 0; } .article-content a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--duration) var(--ease); } .article-content a:hover { color: var(--color-primary-hover); } /* Info Box (callout) */ .article-content .info-box { padding: var(--space-lg) var(--space-xl); margin: var(--space-xl) 0; background: var(--color-accent-light); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius) var(--radius) 0; } .article-content .info-box p:last-child { margin-bottom: 0; } /* Article Share */ .article-share { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xl) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: var(--space-2xl) 0; } .article-share .share-label { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; } .article-share .share-links { display: flex; gap: var(--space-sm); } .article-share .share-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 50%; transition: color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease); } .article-share .share-links a:hover { color: #fff; background: var(--color-primary); transform: translateY(-2px); } .article-share .share-links a svg { width: 18px; height: 18px; } /* Author Box */ .article-author-box { display: flex; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-xl); margin-bottom: var(--space-2xl); } .article-author-box .author-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .article-author-box .author-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-xs); } .article-author-box .author-bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; } /* Related Articles */ .related-articles { padding: var(--space-2xl) 0; } .related-articles .section-title { margin-bottom: var(--space-xl); } /* ========================================================================== 21. Cart & Checkout ========================================================================== */ .woocommerce-cart-form table { width: 100%; border-collapse: collapse; border: none; } .woocommerce-cart-form table th { padding: var(--space-md); font-size: var(--text-sm); font-weight: 700; text-align: left; color: var(--color-text); background: var(--color-bg); border: none; border-bottom: 2px solid var(--color-border); } .woocommerce-cart-form table td { padding: var(--space-lg) var(--space-md); vertical-align: middle; border-bottom: 1px solid var(--color-border); } .woocommerce-cart-form .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius); } .woocommerce-cart-form .product-name a { font-weight: 600; color: var(--color-text); text-decoration: none; } .woocommerce-cart-form .product-name a:hover { color: var(--color-primary); } .woocommerce-cart-form .product-remove a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 1.25rem; color: var(--color-text-muted); background: var(--color-bg); border-radius: 50%; text-decoration: none; transition: color var(--duration) var(--ease), background var(--duration) var(--ease); } .woocommerce-cart-form .product-remove a:hover { color: #fff; background: var(--color-error); } /* Responsive cart table */ @media (max-width: 767px) { .woocommerce-cart-form table, .woocommerce-cart-form table thead, .woocommerce-cart-form table tbody, .woocommerce-cart-form table tr, .woocommerce-cart-form table td { display: block; } .woocommerce-cart-form table thead { display: none; } .woocommerce-cart-form table tr { margin-bottom: var(--space-md); padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .woocommerce-cart-form table td { padding: var(--space-sm) 0; border: none; } } /* Checkout layout */ .checkout-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; } @media (min-width: 900px) { .checkout-layout { grid-template-columns: 1fr 400px; } } /* ========================================================================== 22. My Account ========================================================================== */ .myaccount-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-xl) 0; } @media (min-width: 768px) { .myaccount-layout { grid-template-columns: 220px 1fr; } } .myaccount-nav { list-style: none; margin: 0; padding: 0; } .myaccount-nav li { margin-bottom: var(--space-xs); } .myaccount-nav a { display: flex; align-items: center; gap: var(--space-sm); padding: 0.75rem 1rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius); transition: color var(--duration) var(--ease), background var(--duration) var(--ease); } .myaccount-nav a:hover { color: var(--color-primary); background: var(--color-primary-light); } .myaccount-nav .is-active a, .myaccount-nav .woocommerce-MyAccount-navigation-link--dashboard.is-active a { color: #fff; background: var(--color-primary); } /* ========================================================================== 23. 404 Page ========================================================================== */ .error-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--space-2xl) var(--grid-gap); } .error-404__content { max-width: 520px; } .error-404__code { display: block; font-family: var(--font-display); font-size: clamp(6rem, 15vw, 10rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.35; } .error-404__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-md); } .error-404__description { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: var(--space-xl); } .error-404__actions { margin-bottom: var(--space-2xl); } .error-404__search { padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } .error-404__search-title { font-size: var(--text-base); margin-bottom: var(--space-md); } /* Legacy magazine-* class support for existing templates */ .magazine-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; } .magazine-404__content { max-width: 520px; padding: var(--space-xl); } .magazine-404__code { display: block; font-family: var(--font-display); font-size: clamp(6rem, 15vw, 10rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.35; } .magazine-404__title { font-size: var(--text-2xl); margin: 0 0 var(--space-md); } .magazine-404__description { color: var(--color-text-muted); margin-bottom: var(--space-xl); } .magazine-404__actions { margin-bottom: var(--space-2xl); } .magazine-404__search { padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } .magazine-404__search-title { font-size: var(--text-base); margin-bottom: var(--space-md); } /* ========================================================================== 24. Search ========================================================================== */ .search-header, .magazine-search-header, .magazine-archive__header { margin-bottom: var(--space-2xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); text-align: center; } .magazine-archive__title { margin-bottom: var(--space-sm); } .magazine-archive__title .search-query { color: var(--color-primary); } .magazine-archive__description, .magazine-archive__count { color: var(--color-text-muted); margin: 0; } /* Search Form */ .search-form, .magazine-search-form { display: flex; gap: var(--space-sm); max-width: 500px; } .magazine-search-form__input { flex: 1; } .magazine-search-form__submit { flex-shrink: 0; padding: 0.875rem 1.25rem; } /* No results */ .magazine-no-results { padding: var(--space-3xl) var(--space-xl); text-align: center; } .magazine-no-results__title { margin-bottom: var(--space-md); } .magazine-no-results__description { color: var(--color-text-muted); margin-bottom: var(--space-xl); } .magazine-no-results__search { max-width: 400px; margin: 0 auto; } /* ========================================================================== 25. Pagination ========================================================================== */ .pagination, .nav-links, .post-navigation { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } .pagination .page-numbers, .nav-links a, .nav-links .current { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius); text-decoration: none; transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease); } .pagination .page-numbers:hover, .nav-links a:hover { color: var(--color-primary); border-color: var(--color-primary); } .pagination .page-numbers.current, .nav-links .current { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } .pagination .prev, .pagination .next { min-width: auto; gap: var(--space-xs); } /* Post Navigation */ .post-navigation { flex-direction: column; gap: var(--space-md); } @media (min-width: 768px) { .post-navigation { flex-direction: row; justify-content: space-between; } } .post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; } .post-navigation a { display: block; padding: var(--space-md) var(--space-lg); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .post-navigation a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .post-navigation .nav-subtitle { display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-xs); } .post-navigation .nav-title { display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--color-text); } /* ========================================================================== 26. Comments ========================================================================== */ .magazine-comments { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); } .magazine-comments__title { font-size: var(--text-xl); margin-bottom: var(--space-xl); } .magazine-comments__list { list-style: none; padding: 0; margin: 0 0 var(--space-xl); } .magazine-comment { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); } .magazine-comment .children { list-style: none; padding-left: var(--space-xl); margin: var(--space-md) 0 0; border-left: 2px solid var(--color-border); } .magazine-comment__body { display: grid; gap: var(--space-md); } .magazine-comment__header { display: flex; align-items: center; gap: var(--space-md); } .magazine-comment__avatar img { width: 48px; height: 48px; border-radius: 50%; } .magazine-comment__author { font-weight: 700; font-style: normal; color: var(--color-text); } .magazine-comment__date { font-size: var(--text-xs); color: var(--color-text-muted); } .magazine-comment__content { font-size: var(--text-sm); line-height: 1.7; } .magazine-comment__content p:last-child { margin-bottom: 0; } .magazine-comment__footer { display: flex; gap: var(--space-md); font-size: var(--text-xs); } .magazine-comment__reply a, .magazine-comment__edit a { color: var(--color-primary); font-weight: 600; } .magazine-comment__moderation { padding: 0.75rem 1rem; background: var(--color-accent-light); border-left: 3px solid var(--color-accent); font-size: var(--text-sm); color: var(--color-text-muted); } .magazine-comments__closed { padding: var(--space-lg); text-align: center; background: var(--color-bg); border-radius: var(--radius); color: var(--color-text-muted); } /* Comment Form */ .magazine-comment-form { margin-top: var(--space-xl); } .magazine-comment-form .comment-reply-title { font-size: var(--text-xl); margin-bottom: var(--space-lg); } .magazine-comment-form p { margin-bottom: var(--space-md); } .magazine-comment-form label { display: block; margin-bottom: var(--space-sm); font-weight: 600; } .magazine-comment-form .required { color: var(--color-error); } /* ========================================================================== 27. Widgets & Sidebar ========================================================================== */ .widget { margin-bottom: var(--space-xl); } .widget-title { margin-bottom: var(--space-md); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-primary); } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .widget li:last-child { border-bottom: none; } .widget a { color: var(--color-text); text-decoration: none; } .widget a:hover { color: var(--color-primary); } .magazine-sidebar { padding: var(--space-xl); background: var(--color-bg); border-radius: var(--radius-xl); } /* Page links */ .page-links { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-weight: 600; } .page-links .post-page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0.25rem var(--space-sm); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius); } .page-links .post-page-numbers.current, .page-links .post-page-numbers:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } /* ========================================================================== 28. Utilities ========================================================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-sm); } .mb-2 { margin-bottom: var(--space-md); } .mb-3 { margin-bottom: var(--space-lg); } .mb-4 { margin-bottom: var(--space-xl); } /* Grid utility */ .mag-grid { display: grid; gap: var(--grid-gap); } .mag-grid--2 { grid-template-columns: 1fr; } .mag-grid--3 { grid-template-columns: 1fr; } .mag-grid--4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .mag-grid--2 { grid-template-columns: repeat(2, 1fr); } .mag-grid--3 { grid-template-columns: repeat(2, 1fr); } .mag-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .mag-grid--3 { grid-template-columns: repeat(3, 1fr); } .mag-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* Legacy magazine-container support */ .magazine-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--grid-gap); } /* Legacy magazine-header / footer support */ .magazine-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 252, 247, 0.85); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform var(--duration-slow) var(--ease); } .magazine-header.is-hidden { transform: translateY(-100%); } .magazine-header.is-scrolled { box-shadow: var(--shadow-sm); } .magazine-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-md) 0; } .magazine-logo img { height: 50px; width: auto; } .magazine-logo__text { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); text-decoration: none; } .magazine-logo__text:hover { color: var(--color-primary); } .magazine-nav { display: flex; align-items: center; gap: var(--space-xl); } .magazine-nav__list { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .magazine-nav__item a { display: block; padding: 0.625rem 1rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); border-radius: var(--radius); transition: all var(--duration) var(--ease); } .magazine-nav__item a:hover, .magazine-nav__item.current-menu-item a { color: var(--color-primary); background: var(--color-primary-light); } /* Legacy magazine footer */ .magazine-footer { margin-top: auto; padding: var(--space-3xl) 0 var(--space-xl); background: var(--color-text); color: rgba(255, 255, 255, 0.75); } .magazine-footer a { color: rgba(255, 255, 255, 0.75); } .magazine-footer a:hover { color: var(--color-accent); } .magazine-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); } @media (min-width: 640px) { .magazine-footer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .magazine-footer__title, .magazine-footer__column .widget-title { margin-bottom: var(--space-lg); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: #fff; } .magazine-footer__bottom { padding-top: var(--space-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--text-sm); text-align: center; } /* Legacy mobile menu support */ .magazine-menu-toggle { display: none; padding: var(--space-sm); background: transparent; border: none; cursor: pointer; } .magazine-menu-toggle__icon { display: block; width: 22px; height: 2px; background: var(--color-text); position: relative; transition: all var(--duration) var(--ease); } .magazine-menu-toggle__icon::before, .magazine-menu-toggle__icon::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-text); transition: all var(--duration) var(--ease); } .magazine-menu-toggle__icon::before { top: -7px; } .magazine-menu-toggle__icon::after { top: 7px; } .magazine-menu-toggle[aria-expanded="true"] .magazine-menu-toggle__icon { background: transparent; } .magazine-menu-toggle[aria-expanded="true"] .magazine-menu-toggle__icon::before { top: 0; transform: rotate(45deg); } .magazine-menu-toggle[aria-expanded="true"] .magazine-menu-toggle__icon::after { top: 0; transform: rotate(-45deg); } .magazine-mobile-menu { display: none; position: fixed; inset: 0; z-index: 999; background: var(--color-bg); padding: var(--space-4xl) var(--space-xl) var(--space-xl); overflow-y: auto; } .magazine-mobile-menu.is-open { display: block; animation: fadeIn 0.2s var(--ease-out); } .magazine-mobile-nav__list { list-style: none; padding: 0; margin: 0; } .magazine-mobile-nav__list li { border-bottom: 1px solid var(--color-border); } .magazine-mobile-nav__list a { display: block; padding: var(--space-md) 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); } .magazine-mobile-nav__list a:hover { color: var(--color-primary); } .magazine-mobile-nav__list .sub-menu { padding-left: var(--space-lg); } .magazine-mobile-nav__list .sub-menu a { font-size: var(--text-base); font-weight: 400; } @media (max-width: 768px) { .magazine-menu-toggle { display: block; } .magazine-nav { display: none; } } /* Legacy magazine-article support */ .magazine-article { max-width: var(--container-article); margin: 0 auto; } .magazine-article__header { margin-bottom: var(--space-xl); text-align: center; } .magazine-article__categories { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .magazine-article__categories a { display: inline-block; padding: 0.25rem 0.75rem; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-pill); } .magazine-article__title { margin: 0 0 var(--space-md); font-size: var(--text-3xl); } .magazine-article__meta { display: flex; align-items: center; justify-content: center; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); } .magazine-article__thumbnail { margin: 0 0 var(--space-xl); border-radius: var(--radius-xl); overflow: hidden; } .magazine-article__thumbnail img { width: 100%; height: auto; } .magazine-article__content { font-size: var(--text-base); line-height: 1.8; } .magazine-article__content > *:first-child { margin-top: 0; } .magazine-article__content > *:last-child { margin-bottom: 0; } .magazine-article__content img { max-width: 100%; height: auto; border-radius: var(--radius); } .magazine-article__content a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .magazine-article__content a:hover { color: var(--color-primary-hover); } .magazine-article__footer { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } .magazine-article__tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } .magazine-article__tags .tags-label { font-weight: 700; margin-right: var(--space-sm); } .magazine-article__tags a { color: var(--color-text-muted); font-size: var(--text-sm); } .magazine-article__tags a:hover { color: var(--color-primary); } /* Legacy shop support */ .magazine-shop__header { padding: var(--space-xl) 0; margin-bottom: var(--space-xl); text-align: center; } .magazine-shop__title { font-size: var(--text-3xl); margin: 0 0 var(--space-sm); } /* Magazine main (used on various pages) */ .magazine-main { padding: var(--space-xl) 0 var(--space-3xl); } /* Legacy mag-button support */ .mag-button, .mag-button--primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem 1.75rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1; text-decoration: none; color: #fff; background: var(--color-primary); border: none; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .mag-button:hover, .mag-button--primary:hover { color: #fff; background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-color); } /* Auth buttons from shortcode */ .ujuj-auth-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } /* ========================================================================== 29. Animations & Keyframes ========================================================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 70% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -25px) scale(1.05); } 66% { transform: translate(-20px, 15px) scale(0.95); } } @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes wave { 0% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } 60% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Scroll reveal (triggered via IntersectionObserver in JS) */ .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .scroll-reveal.is-visible, .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } /* data-animate support (used by main.js) */ [data-animate] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } [data-animate].is-visible { opacity: 1; transform: translateY(0); } /* Staggered animation delays */ .stagger-1 { transition-delay: 100ms; } .stagger-2 { transition-delay: 200ms; } .stagger-3 { transition-delay: 300ms; } .stagger-4 { transition-delay: 400ms; } .stagger-5 { transition-delay: 500ms; } /* Named animation utilities */ .animate-fade-in { animation: fadeIn 0.6s var(--ease-out) forwards; } .animate-fade-in-up { animation: fadeInUp 0.6s var(--ease-out) forwards; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .scroll-reveal, [data-animate] { opacity: 1; transform: none; } .hero-blobs::before, .hero-blobs::after, .hero-blobs span { animation: none; } .hero-float-card { animation: none; } } /* ========================================================================== 30. Print Styles ========================================================================== */ @media print { *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } img { page-break-inside: avoid; max-width: 100% !important; } h2, h3 { page-break-after: avoid; } p, h2, h3 { orphans: 3; widows: 3; } /* Hide non-essential elements */ .site-header, .site-footer, .magazine-header, .magazine-footer, .mobile-menu, .magazine-mobile-menu, .promo-bar, .hamburger, .header-actions, .newsletter, .article-share, .footer-social, .breadcrumbs, .pagination, .post-navigation, .magazine-comments, .search-form, .magazine-search-form { display: none !important; } body { font-size: 12pt; line-height: 1.5; } .ujuj-container, .container, .container-narrow, .container-article, .magazine-container { max-width: 100%; padding: 0; } } /* ============================================ LINKED PRODUCT (in blog articles) ============================================ */ .linked-product { margin: var(--space-2xl) 0; background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; border: 2px solid var(--color-border); box-shadow: var(--shadow-md); } .linked-product-rainbow { height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-secondary), var(--color-sky), var(--color-purple), var(--color-pink) ); } .linked-product-inner { padding: var(--space-xl); display: flex; gap: var(--space-xl); align-items: flex-start; } .linked-product-image { flex-shrink: 0; width: 120px; border-radius: var(--radius-lg); overflow: hidden; } .linked-product-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .linked-product-content { flex: 1; min-width: 0; } .linked-product-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); } .linked-product-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); line-height: 1.6; } .linked-product-message { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); font-weight: 600; } .linked-product-message--warning { color: var(--color-primary); display: flex; align-items: center; gap: var(--space-sm); } .linked-product-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .linked-product-prices-label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-sm); } .linked-product-price-buttons { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg); } .linked-product-counter { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .counter-bar { display: block; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; margin-bottom: var(--space-sm); } .counter-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; transition: width var(--duration-slow) var(--ease); } .counter-text { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; display: block; margin-bottom: var(--space-xs); } .counter-promo { font-size: var(--text-xs); color: var(--color-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .counter-promo:hover { text-decoration: underline; } /* Locked state */ .linked-product--locked { border-color: var(--color-border); background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%); } .linked-product--locked .linked-product-image { opacity: 0.5; filter: grayscale(30%); } /* Mobile */ @media (max-width: 600px) { .linked-product-inner { flex-direction: column; } .linked-product-image { width: 80px; } } /* ========================================================================== LANDING PAGES — Subscription Pages (lsub-*) ========================================================================== */ /* ── btn-lg (used across landing pages) ── */ .btn-lg { padding: 1.1rem 2.25rem; font-size: var(--text-base); } /* ── Landing sub — base ── */ .landing-sub { overflow-x: hidden; } /* ── HERO ── */ .lsub-hero { position: relative; padding: var(--space-4xl) 0 var(--space-3xl); overflow: hidden; } .lsub-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .lsub-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .25; animation: lsub-float 14s ease-in-out infinite; } .lsub-orb--1 { width: 500px; height: 500px; top: -120px; right: -80px; } .lsub-orb--2 { width: 380px; height: 380px; bottom: -60px; left: -60px; animation-delay: -7s; } /* Color variants for orbs */ .landing-sub--ouistitis .lsub-orb--1 { background: var(--color-primary); } .landing-sub--ouistitis .lsub-orb--2 { background: var(--color-accent); } .landing-sub--academie .lsub-orb--1 { background: var(--color-secondary); } .landing-sub--academie .lsub-orb--2 { background: var(--color-sky); } .landing-sub--ressources .lsub-orb--1 { background: var(--color-purple); } .landing-sub--ressources .lsub-orb--2 { background: var(--color-pink); } @keyframes lsub-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-15px, 15px) scale(0.97); } } .lsub-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-3xl); align-items: center; } .lsub-hero__inner--centered { grid-template-columns: 1fr; text-align: center; max-width: 780px; margin: 0 auto; } .lsub-hero__badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.4rem 1rem; background: var(--color-surface); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; box-shadow: var(--shadow-sm); margin-bottom: var(--space-lg); } .landing-sub--ouistitis .lsub-hero__badge { color: var(--color-primary); border: 1.5px solid var(--color-primary-light); } .landing-sub--academie .lsub-hero__badge { color: var(--color-secondary); border: 1.5px solid var(--color-secondary-light); } .landing-sub--ressources .lsub-hero__badge { color: var(--color-purple); border: 1.5px solid var(--color-purple-light); } .lsub-hero__text h1 { font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-lg); } .lsub-hero__text h1 em { font-style: italic; } .landing-sub--ouistitis .lsub-hero__text h1 em { color: var(--color-primary); } .landing-sub--academie .lsub-hero__text h1 em { color: var(--color-secondary); } .landing-sub--ressources .lsub-hero__text h1 em { color: var(--color-purple); } .lsub-hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-xl); max-width: 560px; } .lsub-hero__inner--centered .lsub-hero__sub { max-width: 640px; margin-left: auto; margin-right: auto; } .lsub-hero__actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .lsub-hero__inner--centered .lsub-hero__actions { justify-content: center; } .lsub-hero__trust { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; } .lsub-hero__trust svg { width: 14px; height: 14px; color: var(--color-secondary); } .lsub-hero__visual { display: flex; justify-content: center; align-items: center; } .lsub-hero__logo { width: 100%; max-width: 380px; height: auto; border-radius: var(--radius-xl); filter: drop-shadow(0 12px 32px rgba(0,0,0,.1)); transition: transform var(--duration-slow) var(--ease-spring); } .lsub-hero__logo:hover { transform: scale(1.03) rotate(-1deg); } /* ── AGE SWITCH TABS ── */ .lsub-age-switch { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-md) 0; position: sticky; top: 68px; z-index: 50; backdrop-filter: blur(12px); } .lsub-age-tabs { display: flex; gap: var(--space-sm); justify-content: center; } .lsub-age-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.7rem 1.5rem; border-radius: var(--radius-lg); font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); border: 2px solid transparent; } .lsub-age-tab small { font-size: var(--text-xs); font-weight: 600; opacity: .7; } .lsub-age-tab:hover { background: var(--color-bg); color: var(--color-text); } .landing-sub--ouistitis .lsub-age-tab.is-active { background: var(--color-primary-light); color: var(--color-primary); border-color: rgba(232,93,58,.2); } .landing-sub--academie .lsub-age-tab.is-active { background: var(--color-secondary-light); color: var(--color-secondary); border-color: rgba(45,122,111,.2); } /* ── SECTION TITLES ── */ .lsub-section-title { text-align: center; font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-xl); } .lsub-section-title em { font-style: italic; } .landing-sub--ouistitis .lsub-section-title em { color: var(--color-primary); } .landing-sub--academie .lsub-section-title em { color: var(--color-secondary); } .landing-sub--ressources .lsub-section-title em { color: var(--color-purple); } /* ── CONTENT SECTION (weekly content cards) ── */ .lsub-content-section { padding: var(--space-3xl) 0; } .lsub-content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } .lsub-content-card { background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease); } .lsub-content-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } .lsub-content-card__img { aspect-ratio: 4 / 3; overflow: hidden; } .lsub-content-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .lsub-content-card:hover .lsub-content-card__img img { transform: scale(1.06); } .lsub-content-card h3 { font-size: var(--text-base); font-weight: 800; padding: var(--space-md) var(--space-lg) var(--space-xs); margin-bottom: 0; } .lsub-content-card p { font-size: var(--text-sm); color: var(--color-text-muted); padding: 0 var(--space-lg) var(--space-lg); line-height: 1.55; } /* ── OVERVIEW SECTION ── */ .lsub-overview { padding: var(--space-3xl) 0; background: radial-gradient(ellipse 50% 50% at 0% 50%, rgba(232,93,58,.04) 0%, transparent 70%), var(--color-bg); } .landing-sub--academie .lsub-overview { background: radial-gradient(ellipse 50% 50% at 0% 50%, rgba(45,122,111,.04) 0%, transparent 70%), var(--color-bg); } .lsub-overview__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-3xl); align-items: center; } .lsub-overview__text h2 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-md); } .lsub-overview__text > p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-xl); } .lsub-overview__image img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } /* ── CHECKLIST ── */ .lsub-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-lg); list-style: none; } .lsub-checklist li { position: relative; padding-left: 1.75rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.5; color: var(--color-text); } .lsub-checklist li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-secondary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D7A6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; } .landing-sub--ouistitis .lsub-checklist li::before { background-color: var(--color-primary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E85D3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .landing-sub--ressources .lsub-checklist li::before { background-color: var(--color-purple-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C5CBA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .lsub-checklist--centered { max-width: 640px; margin: 0 auto; } /* ── SOCIAL PROOF ── */ .lsub-proof { padding: var(--space-3xl) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .lsub-proof__sub { text-align: center; font-size: var(--text-base); color: var(--color-text-muted); max-width: 680px; margin: 0 auto var(--space-xl); line-height: 1.65; } /* ── PRICING SECTION ── */ .lsub-pricing { padding: var(--space-4xl) 0 var(--space-3xl); background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(245,183,49,.05) 0%, transparent 70%), var(--color-bg); } .lsub-pricing__sub { text-align: center; font-size: var(--text-lg); color: var(--color-text-muted); max-width: 600px; margin: calc(var(--space-xl) * -1 + var(--space-sm)) auto var(--space-md); line-height: 1.6; } .lsub-pricing__guarantee { text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--color-secondary); margin-bottom: var(--space-2xl); } .lsub-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: start; max-width: 1020px; margin: 0 auto; } /* ── PRICE CARD ── */ .lsub-price-card { position: relative; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); text-align: center; transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease), border-color var(--duration) var(--ease); } .lsub-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .lsub-price-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 0.35rem 1.1rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .landing-sub--ouistitis .lsub-price-card__badge { background: var(--color-primary); color: #fff; } .landing-sub--academie .lsub-price-card__badge { background: var(--color-secondary); color: #fff; } .lsub-price-card--featured { z-index: 2; } .landing-sub--ouistitis .lsub-price-card--featured { border-color: var(--color-primary); box-shadow: 0 8px 32px rgba(232,93,58,.12); } .landing-sub--ouistitis .lsub-price-card--featured:hover { box-shadow: 0 16px 48px rgba(232,93,58,.18); } .landing-sub--academie .lsub-price-card--featured { border-color: var(--color-secondary); box-shadow: 0 8px 32px rgba(45,122,111,.12); } .landing-sub--academie .lsub-price-card--featured:hover { box-shadow: 0 16px 48px rgba(45,122,111,.18); } .lsub-price-card__period { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-xs); } .lsub-price-card__formula { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-lg); } .lsub-price-card__amount { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: var(--space-xs); } .lsub-price-card__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.8rem, 2.4rem + 2vw, 3.8rem); line-height: 1; } .landing-sub--ouistitis .lsub-price-card__num { color: var(--color-primary); } .landing-sub--academie .lsub-price-card__num { color: var(--color-secondary); } .lsub-price-card__cents { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); } .landing-sub--ouistitis .lsub-price-card__cents { color: var(--color-primary); } .landing-sub--academie .lsub-price-card__cents { color: var(--color-secondary); } .lsub-price-card__per { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; margin-left: 4px; } .lsub-price-card__save { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: line-through; margin-bottom: var(--space-lg); } .lsub-price-card__features { list-style: none; text-align: left; margin-bottom: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); } .lsub-price-card__features li { position: relative; padding-left: 1.5rem; font-size: var(--text-sm); line-height: 1.45; font-weight: 600; } .lsub-price-card__features li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 9px; } .landing-sub--ouistitis .lsub-price-card__features li::before { background-color: var(--color-primary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E85D3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .landing-sub--academie .lsub-price-card__features li::before { background-color: var(--color-secondary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D7A6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .lsub-price-card__cta { width: 100%; justify-content: center; } .lsub-pricing__bonus { text-align: center; max-width: 700px; margin: var(--space-xl) auto 0; padding: var(--space-lg); background: var(--color-accent-light); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text); border: 1px solid rgba(245,183,49,.25); } .lsub-pricing__bonus strong { color: var(--color-accent); } /* ── ABOUT SECTION ── */ .lsub-about { padding: var(--space-3xl) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); } .lsub-about__inner { display: flex; align-items: flex-start; gap: var(--space-xl); } .lsub-about__photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--color-border); box-shadow: var(--shadow-sm); } .lsub-about__inner h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); } .lsub-about__inner p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; } /* ── FINAL CTA ── */ .lsub-final-cta { padding: var(--space-4xl) 0; text-align: center; position: relative; overflow: hidden; } .landing-sub--ouistitis .lsub-final-cta { background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); } .landing-sub--academie .lsub-final-cta { background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%); } .landing-sub--ressources .lsub-final-cta { background: linear-gradient(160deg, var(--color-purple) 0%, #5E3D91 100%); } .lsub-final-cta h2 { color: #fff; font-size: var(--text-2xl); max-width: 640px; margin: 0 auto var(--space-xl); } .lsub-final-cta p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto var(--space-xl); font-size: var(--text-base); line-height: 1.65; } .lsub-final-cta .btn { background: #fff; border-color: #fff; } .landing-sub--ouistitis .lsub-final-cta .btn { color: var(--color-primary); } .landing-sub--ouistitis .lsub-final-cta .btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); box-shadow: 0 8px 24px rgba(0,0,0,.2); } .landing-sub--academie .lsub-final-cta .btn { color: var(--color-secondary); } .landing-sub--academie .lsub-final-cta .btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); box-shadow: 0 8px 24px rgba(0,0,0,.2); } .landing-sub--ressources .lsub-final-cta .btn { color: var(--color-purple); } .landing-sub--ressources .lsub-final-cta .btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); box-shadow: 0 8px 24px rgba(0,0,0,.2); } /* ── BENEFITS GRID (Ressources page) ── */ .lsub-benefits { padding: var(--space-3xl) 0; } .lsub-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .lsub-benefit { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); text-align: center; transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease), border-color var(--duration) var(--ease); } .lsub-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(124,92,186,.2); } .lsub-benefit__icon { font-size: 2.4rem; line-height: 1; margin-bottom: var(--space-md); filter: drop-shadow(0 2px 4px rgba(0,0,0,.06)); transition: transform var(--duration-slow) var(--ease-spring); } .lsub-benefit:hover .lsub-benefit__icon { transform: scale(1.15) rotate(-5deg); } .lsub-benefit h3 { font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-sm); } .lsub-benefit p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; } /* ── STEPS (Ressources page) ── */ .lsub-steps { padding: var(--space-3xl) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .lsub-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); max-width: 900px; margin: 0 auto; position: relative; } /* connector line between steps */ .lsub-steps-grid::before { content: ''; position: absolute; top: 28px; left: calc(16.666% + 24px); right: calc(16.666% + 24px); height: 2px; background: var(--color-border); } .lsub-step { text-align: center; position: relative; } .lsub-step__num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-purple); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-md); box-shadow: 0 4px 16px rgba(124,92,186,.25); position: relative; z-index: 1; } .lsub-step h3 { font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-xs); } .lsub-step p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; max-width: 250px; margin: 0 auto; } .lsub-steps__cta { text-align: center; margin-top: var(--space-2xl); } /* ── GALLERY (Ressources page) ── */ .lsub-gallery { padding: var(--space-3xl) 0; } .lsub-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } .lsub-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--color-border); transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease); } .lsub-gallery-grid img:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-hover); } /* ── WHAT YOU GET (Ressources page) ── */ .lsub-what-you-get { padding: var(--space-3xl) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); } /* ── RESPONSIVE — Tablet ── */ @media (max-width: 960px) { .lsub-hero__inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-xl); } .lsub-hero__sub { margin-left: auto; margin-right: auto; } .lsub-hero__actions { justify-content: center; } .lsub-hero__visual { order: -1; } .lsub-hero__logo { max-width: 280px; } .lsub-content-grid { grid-template-columns: repeat(2, 1fr); } .lsub-overview__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .lsub-overview__image { order: -1; max-width: 500px; margin: 0 auto; } .lsub-checklist { grid-template-columns: 1fr; } .lsub-pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } .lsub-benefits-grid { grid-template-columns: repeat(2, 1fr); } .lsub-gallery-grid { grid-template-columns: repeat(2, 1fr); } .lsub-steps-grid::before { display: none; } } /* ── RESPONSIVE — Mobile ── */ @media (max-width: 600px) { .lsub-hero { padding: var(--space-2xl) 0 var(--space-xl); } .lsub-hero__text h1 { font-size: var(--text-2xl); } .lsub-age-tabs { gap: var(--space-xs); } .lsub-age-tab { padding: 0.5rem 1rem; font-size: var(--text-xs); } .lsub-content-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } .lsub-benefits-grid { grid-template-columns: 1fr; } .lsub-steps-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .lsub-gallery-grid { grid-template-columns: repeat(2, 1fr); } .lsub-about__inner { flex-direction: column; text-align: center; align-items: center; } .lsub-final-cta { padding: var(--space-2xl) 0; } }