/* ========================================================================== D2C GAME — UNIFIED DESKTOP DESIGN SYSTEM Version: 1.0 / September 2026 Load order: 1) /assets/css/style.css (base + mobile) 2) /assets/css/mobile-insights.css (only if still separate) 3) /assets/css/d2c-desktop.css (THIS FILE, last) Remove all old desktop-only CSS links after installing this file. Desktop breakpoint: 1024px ========================================================================== */ /* Desktop-only components stay hidden on mobile. */ .home-hero__badges, .os-side, .os-section__background, .os-section__background-shade, .roman-role-grid, .roman-stat--desktop-only, .masterclass-bg, .masterclass-shade { display: none; } @media (min-width: 1024px) { :root { /* Brand */ --d2c-purple: #6d2cff; --d2c-purple-bright: #7a35ff; --d2c-purple-soft: #f1eaff; --d2c-purple-line: #d8c6ff; --d2c-gold: #ffc329; --d2c-gold-end: #ffd052; --d2c-gold-hover: #ffd866; /* Neutrals */ --d2c-black: #07090d; --d2c-dark: #081019; --d2c-copy: #566174; --d2c-copy-dark: #d5dae2; --d2c-muted: #7b8595; --d2c-border: #e1e5ea; --d2c-surface: #f7f8fa; --d2c-white: #ffffff; /* Layout */ --d2c-desktop-width: 1440px; --d2c-desktop-gutter: 48px; --d2c-desktop-gutter-total: 96px; /* Type scale — same hierarchy across every section */ --d2c-h1: clamp(60px, 4.2vw, 72px); --d2c-h2: clamp(50px, 3.25vw, 56px); --d2c-h3-lg: 36px; --d2c-h3: 28px; --d2c-card-title: 22px; --d2c-intro: 18px; --d2c-body: 16px; --d2c-small: 13px; --d2c-micro: 11px; --d2c-kicker: 12px; /* Geometry */ --d2c-radius-sm: 8px; --d2c-radius: 10px; --d2c-radius-lg: 14px; --d2c-button-height: 56px; --d2c-shadow: 0 8px 24px rgba(20, 29, 48, .07); } .home-page, .home-page button, .home-page input, .home-page textarea, .home-page select { font-family: Inter, \"Helvetica Neue\", Arial, system-ui, -apple-system, sans-serif; } .home-page *, .home-page *::before, .home-page *::after { box-sizing: border-box; } /* ONE horizontal frame for header, hero and every homepage section. */ .home-page .home-shell, .home-page .home-hero__content, .home-page .header-inner { width: min(var(--d2c-desktop-width), calc(100% - var(--d2c-desktop-gutter-total))); max-width: none; margin-left: auto; margin-right: auto; } } /* ==================== 01 HERO ==================== */ /* * D2C Game — Homepage desktop hero only * Target: supplied 1920 × 1080 desktop design. * Mobile is intentionally untouched. */ .home-hero__badges { display: none; } @media (min-width: 1024px) { :root { --hero-desktop-width: 1716px; --hero-purple: #7c35ff; --hero-yellow: #ffca2b; } /* ======================================== HEADER ======================================== */ .home-page .site-header { position: relative; z-index: 60; height: 96px; background: #060b10; border: 0; border-bottom: 1px solid rgba(255,255,255,.13); backdrop-filter: none; color: #fff; } .home-page .header-inner { width: min( var(--hero-desktop-width), calc(100% - 104px) ); max-width: none; height: 96px; min-height: 96px; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 0; } .home-page .brand { flex: 0 0 auto; color: #fff; text-decoration: none; font-size: 31px; line-height: .92; font-weight: 900; letter-spacing: -.045em; white-space: nowrap; } .home-page .brand::after { content: "BUSINESS SYSTEMS. REAL RESULTS."; display: block; margin-top: 10px; color: #8e96a2; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .09em; } .home-page .menu-toggle { display: none; } .home-page .site-nav { position: static; display: flex; align-items: center; flex: 1 1 auto; gap: 34px; margin-left: 238px; padding: 0; background: transparent; border: 0; } .home-page .site-nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0; color: #f7f8fa; text-decoration: none; font-size: 17px; line-height: 1; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; } /* Home active underline */ .home-page .site-nav a:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; border-radius: 999px; background: #a34fff; } /* Yellow training CTA */ .home-page .site-nav a:last-child { min-width: 314px; height: 60px; min-height: 60px; margin-left: auto; padding: 0 23px; gap: 13px; border-radius: 8px; background: linear-gradient( 90deg, #ffd23f 0%, #ffc526 100% ); color: #090d11; font-size: 18px; font-weight: 900; letter-spacing: -.025em; box-shadow: 0 8px 24px rgba(255,194,39,.13); } .home-page .site-nav a:last-child::before { content: "▶"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #080c10; color: #ffcd31; font-size: 12px; line-height: 1; padding-left: 2px; } .home-page .site-nav a:last-child::after { content: "→"; position: static; width: auto; height: auto; margin-left: auto; background: none; color: #0b0e11; font-size: 25px; font-weight: 500; line-height: 1; } /* ======================================== HERO WRAPPER ======================================== */ .home-page main { overflow: hidden; } .home-hero { position: relative; height: calc(100vh - 96px); min-height: 884px; max-height: 984px; margin: 0; padding: 0; overflow: hidden; background: #040910; color: #fff; } /* ======================================== HERO PHOTO ======================================== */ .home-hero__visual { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; overflow: hidden; background: #050910; } .home-hero__visual picture, .home-hero__visual picture img, .home-hero__visual > img { display: block; width: 100%; height: 100%; } .home-hero__visual picture img, .home-hero__visual > img { object-fit: cover; object-position: center center; } /* dark overlay */ .home-hero__image-shade { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, rgba(3,7,12,.04) 0%, rgba(3,7,12,.02) 63%, rgba(3,7,12,.24) 100% ), linear-gradient( 90deg, rgba(3,8,14,.97) 0%, rgba(3,8,14,.95) 25%, rgba(3,8,14,.90) 35%, rgba(3,8,14,.73) 43%, rgba(3,8,14,.43) 52%, rgba(3,8,14,.17) 66%, rgba(3,8,14,.08) 100% ); pointer-events: none; } /* ======================================== HERO CONTENT ======================================== */ .home-page .home-hero__content { position: relative; z-index: 2; display: block; width: min( var(--hero-desktop-width), calc(100% - 104px) ); max-width: none; height: 100%; margin: 0 auto; padding: 40px 0 0px; } /* eyebrow */ .home-hero__eyebrow { margin: 0 0 22px; color: #a05bff; font-size: 16px; line-height: 1.1; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; } /* main heading */ .home-hero h1 { width: 720px; max-width: 720px; margin: 0; color: #fff; font-size: 80px; line-height: .91; font-weight: 900; letter-spacing: -.055em; } .home-hero h1 span { color: #7c35ff; } /* introduction */ .home-hero__copy { width: 715px; max-width: 715px; margin: 28px 0 0; color: #f0f1f3; font-size: 20px; line-height: 1.42; font-weight: 430; letter-spacing: -.016em; } /* ======================================== PRIMARY CTA ======================================== */ .home-hero__primary { display: grid; grid-template-columns: 44px auto 28px; align-items: center; column-gap: 17px; width: 548px; max-width: 548px; height: 76px; min-height: 76px; margin: 24px 0 0; padding: 0 24px 0 20px; border-radius: 11px; background: linear-gradient( 90deg, #ffd23c 0%, #ffc329 100% ); color: #090d11; text-decoration: none; font-size: 21px; line-height: 1; font-weight: 900; letter-spacing: -.025em; box-shadow: 0 10px 28px rgba(255,193,37,.12); } .home-hero__play { display: grid; place-items: center; width: 44px; height: 44px; color: #080c10; } .home-hero__play svg { width: 44px; height: 44px; } .home-hero__arrow { width: 28px; height: 28px; justify-self: end; } /* secondary CTA */ .home-hero__secondary { display: block; align-items: center; gap: 7px; margin: 21px 0 0; color: #a34fff; text-decoration: none; font-size: 17px; line-height: 1.2; font-weight: 650; } .home-hero__secondary span { font-size: 22px; line-height: 1; transform: translateY(-1px); } /* ======================================== 3 TRUST ITEMS ======================================== */ .home-hero__badges { display: flex; align-items: center; width: max-content; margin: 24px 0 0; color: #f4f5f7; font-size: 16px; line-height: 1; font-weight: 620; } .home-hero__badges > span { display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 0 25px; border-left: 1px solid rgba(255,255,255,.25); white-space: nowrap; } .home-hero__badges > span:first-child { padding-left: 0; border-left: 0; } .home-hero__badges b { display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid rgba(255,255,255,.86); border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900; } /* ======================================== BOTTOM PROOF ITEMS ======================================== */ .home-hero__proof { display: grid; grid-template-columns: repeat(4, 170px); column-gap: 70px; width: 890px; max-width: 890px; margin: 42px 0 0; padding: 25px 0 0; border-top: 1px solid rgba(255,255,255,.16); } .proof-item { display: block; min-width: 0; color: #fff; } .proof-item__icon { display: block; width: 38px; height: 38px; margin: 0 0 12px; color: #f4f6f8; } .home-page .proof-item strong { display: block; margin: 0 0 7px; color: #fff; font-size: 16px; line-height: 1.15; font-weight: 760; } .proof-item p { max-width: 170px; margin: 0; color: #e1e4e8; font-size: 13px; line-height: 1.34; } } /* * Smaller desktop/laptop adjustment. */ @media ( min-width: 1024px ) and ( max-width: 1500px ) { .home-page .header-inner, .home-hero__content { width: calc(100% - 72px); } .home-page .site-nav { margin-left: 90px; gap: 25px; } .home-page .site-nav a { font-size: 15px; } .home-page .site-nav a:last-child { min-width: 250px; font-size: 16px; } .home-hero h1 { width: 620px; font-size: 68px; } .home-hero__copy { width: 610px; font-size: 18px; } .home-hero__primary { width: 500px; } .home-hero__proof { grid-template-columns: repeat(4,150px); column-gap: 48px; width: 744px; } } /* ==================== 02 CHOOSE YOUR PATH ==================== */ /* * D2C GAME * CHOOSE YOUR PATH * * DESKTOP ONLY * * Target: * supplied 1920 × 1080 design * * Mobile is intentionally untouched. */ @media (min-width: 1024px) { /* ===================================================== SECTION ===================================================== */ .path-section { position: relative; padding: 60px 0 104px; overflow: hidden; background: linear-gradient( 180deg, #f9f9fc 0%, #ffffff 22%, #ffffff 78%, #faf8ff 100% ); color: #090b10; } .path-section #paths-title .paths-title-accent { color: #762eff; } /* * Very subtle diagonal background shapes * visible in the reference. */ .path-section::before, .path-section::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .path-section::before { top: -130px; left: -80px; width: 900px; height: 360px; background: linear-gradient( 150deg, rgba(236, 239, 255, .68), rgba(255,255,255,0) ); transform: rotate(-5deg); } .path-section::after { right: -120px; bottom: -160px; width: 900px; height: 380px; background: linear-gradient( 320deg, rgba(239, 232, 255, .70), rgba(255,255,255,0) ); transform: rotate(4deg); } .path-section .home-shell { position: relative; z-index: 1; width: min( 1600px, calc(100% - 160px) ); max-width: none; margin: 0 auto; } /* ===================================================== HEADING ===================================================== */ .path-section .home-heading { max-width: 1210px; margin: 0 auto 26px; text-align: center; } .path-section .home-kicker { margin: 0 0 25px; color: #7030ff; font-size: 16px; line-height: 1; font-weight: 800; letter-spacing: .36em; text-transform: uppercase; } .path-section .home-heading h2 { margin: 0; color: #05070b; font-size: 68px; line-height: .93; font-weight: 900; letter-spacing: -.055em; } /* * Only the Results. part should be purple. */ .path-section .home-heading h2 .purple-text { color: #762eff; } .path-section .home-heading > p:last-child { max-width: 1120px; margin: 18px auto 0; color: #4d586b; font-size: 22px; line-height: 1.35; font-weight: 400; letter-spacing: -.018em; } /* ===================================================== CARDS WRAPPER ===================================================== */ .path-stack { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 18px; align-items: stretch; margin-top: 20px; } /* ===================================================== BOTH CARDS ===================================================== */ .path-card { position: relative; min-width: 0; height: 500px; min-height: 500px; padding: 25px 25px 25px; overflow: hidden; border-radius: 14px; box-shadow: 0 12px 34px rgba(19, 28, 45, .07); } .path-card__copy { position: relative; z-index: 3; width: 56%; max-width: 440px; } /* ===================================================== LEFT / DARK CARD ===================================================== */ .path-card--dark { color: #fff; background: radial-gradient( circle at 88% 20%, rgba(65,72,81,.45), rgba(65,72,81,0) 36% ), linear-gradient( 135deg, #071017 0%, #0b1219 60%, #171d23 100% ); border: 1px solid rgba(255,255,255,.06); } .path-card--dark .check-list li svg path{ stroke: black; } /* ===================================================== RIGHT / LIGHT CARD ===================================================== */ .path-card--light { color: #07090d; background: radial-gradient( circle at 88% 18%, rgba(226,228,233,.92), rgba(226,228,233,0) 48% ), linear-gradient( 135deg, #ffffff 0%, #fbfbfc 58%, #eceef2 100% ); border: 1px solid #e8eaef; } /* ===================================================== PATH LABEL ===================================================== */ .path-card__label { display: block; margin: 0; font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .path-card--dark .path-card__label { color: #d3cee1; } .path-card--light .path-card__label { color: #7435ff; } /* ===================================================== CARD TITLE ===================================================== */ .path-card h3 { margin: 20px 0 14px; font-size: 50px; line-height: .94; font-weight: 900; letter-spacing: -.052em; } .path-card--dark h3 { color: #fff; } .path-card--light h3 { color: #07090d; } /* ===================================================== DESCRIPTION ===================================================== */ .path-card__copy > p { max-width: 405px; margin: 0; font-size: 20px; line-height: 1.38; font-weight: 400; letter-spacing: -.018em; } .path-card--dark .path-card__copy > p { color: #e0e2e6; } .path-card--light .path-card__copy > p { color: #4d586b; } /* ===================================================== CHECK LIST ===================================================== */ .path-card .check-list { display: grid; gap: 15px; margin: 27px 0 31px; padding: 0; list-style: none; } .path-card .check-list li { display: grid; grid-template-columns: 25px 1fr; gap: 12px; align-items: start; margin: 0; font-size: 16px; line-height: 1.35; font-weight: 450; letter-spacing: -.012em; } .path-card--dark .check-list li { color: #f2f3f5; } .path-card--light .check-list li { color: #4e596b; } .path-card .check-list svg { display: block; width: 25px; height: 25px; flex: 0 0 25px; } /* * Left checks yellow */ .path-card--dark .check-list svg { color: #ffc329; } /* * Right checks purple */ .path-card--light .check-list svg { color: #712cff; } /* ===================================================== CTA ===================================================== */ .path-card .gold-button { z-index: 4; display: flex; align-items: center; justify-content: space-between; width: 375px; height: 70px; min-height: 70px; padding: 0 26px; border: 0; border-radius: 9px; background: linear-gradient( 90deg, #ffc328 0%, #ffca36 100% ); color: #090c10; box-shadow: 0 10px 25px rgba(255, 191, 26, .14); text-decoration: none; font-size: 19px; line-height: 1; font-weight: 900; letter-spacing: -.026em; } .path-card .gold-button svg { width: 25px; height: 25px; } /* ===================================================== PERSON IMAGE ===================================================== */ /* * Because we're using , * style both picture and image. */ .path-card__person { position: absolute; z-index: 2; right: -4px; bottom: 0; display: block; width: 46%; height: 95%; pointer-events: none; } .path-card__person img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } /* Build & Scale person */ .path-card--dark .path-card__person { } /* * AI Operations person is slightly * taller / wider in the reference. */ .path-card--light .path-card__person { width:100%; } /* ===================================================== PERSON LIGHT / BLENDING ===================================================== */ /* * subtle blend on the left edge of * the portrait area */ .path-card::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: 31%; width: 18%; pointer-events: none; } .path-card--dark::after { background: linear-gradient( 90deg, #0b1218 0%, rgba(11,18,24,.72) 32%, rgba(11,18,24,0) 100% ); } .path-card--light::after { background: linear-gradient( 90deg, #fbfbfc 0%, rgba(251,251,252,.62) 36%, rgba(251,251,252,0) 100% ); } } /* ========================================================= LAPTOP DESKTOP Still desktop. Mobile remains completely untouched. ========================================================= */ @media ( min-width: 1024px ) and ( max-width: 1500px ) { .path-section { padding: 55px 0 80px; } .path-section .home-shell { width: calc(100% - 80px); } .path-section .home-heading h2 { font-size: 58px; } .path-section .home-heading > p:last-child { max-width: 950px; font-size: 19px; } .path-card { height: 555px; min-height: 555px; padding: 36px 30px; } .path-card__copy { width: 57%; } .path-card h3 { font-size: 43px; } .path-card__copy > p { font-size: 17px; } .path-card .check-list li { font-size: 14px; } .path-card .gold-button { left: 30px; bottom: 29px; width: 310px; height: 62px; min-height: 62px; font-size: 17px; } } /* ==================== 03 BUSINESS SYSTEM ==================== */ /* * D2C GAME * THE D2C BUSINESS SYSTEM * DESKTOP ONLY * * Mobile remains untouched. */ @media (min-width: 1024px) { /* ===================================================== SECTION ===================================================== */ .system-section { position: relative; padding: 48px 0 52px; overflow: hidden; background: linear-gradient( 180deg, #ffffff 0%, #fdfdfe 100% ); color: #090b10; } .system-section .home-shell { position: relative; z-index: 2; width: min( 1740px, calc(100% - 90px) ); max-width: none; margin: 0 auto; } /* subtle background polygons */ .system-section::before { content: ""; position: absolute; top: -120px; left: -180px; width: 720px; height: 420px; background: linear-gradient( 145deg, rgba(241, 243, 250, .62), rgba(255,255,255,0) ); transform: rotate(-7deg); pointer-events: none; } /* ===================================================== HEADER ===================================================== */ .system-heading { max-width: 1220px; margin: 0 auto 30px; text-align: center; } .system-heading .home-kicker { margin: 0 0 24px; color: #692bff; font-size: 16px; line-height: 1; font-weight: 800; letter-spacing: .36em; text-transform: uppercase; } .system-heading h2 { margin: 0; color: #06080c; font-size: 64px; line-height: 1.01; font-weight: 900; letter-spacing: -.052em; } .system-heading h2 .purple-text, .system-heading h2 .system-title-accent { color: #702aff; } .system-heading > p:last-child { max-width: 940px; margin: 20px auto 0; color: #526078; font-size: 22px; line-height: 1.36; font-weight: 400; letter-spacing: -.016em; } /* ===================================================== OLD / NEW WAY ROW ===================================================== */ .system-section .system-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); gap: 34px; align-items: center; width: 1260px; max-width: 100%; margin: 34px auto 0; } /* If your PHP does not have .system-comparison, the following also works when cards/transition are direct children of .home-shell. */ .system-section .way-card { position: relative; width: 100%; max-width: none; min-height: 300px; margin: 0; padding: 38px 45px 34px; border-radius: 15px; background: #fff; box-shadow: 0 10px 30px rgba(23, 33, 52, .035); } /* OLD WAY */ .way-card--old { border: 1px solid #dfe3e9; } /* NEW WAY */ .way-card--new { border: 2px solid #b684ff; box-shadow: 0 9px 26px rgba(111, 43, 255, .08); } /* Pills */ .way-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 0 17px; border-radius: 999px; font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: .09em; } .way-card--old .way-pill { background: #eef0f3; color: #27303e; } .way-card--new .way-pill { background: #eee5ff; color: #6421ff; } /* Card titles */ .way-card h3 { margin: 18px 0 19px; color: #090b0f; font-size: 35px; line-height: 1; font-weight: 900; letter-spacing: -.045em; } /* divider below title */ .way-card h3::after { content: ""; display: block; width: 100%; height: 0px; margin-top: 19px; background: #dde1e7; } .way-card--new h3::after { background: #dccaff; } /* lists */ .way-list { display: grid; gap: 0px; margin: 0; padding: 0; border-top:0; list-style: none; } .way-list li { display: grid; padding: 5px 0; grid-template-columns: 30px 1fr; gap: 14px; align-items: center; margin: 0; color: #354157; font-size: 17px; line-height: 1.3; font-weight: 450; } .way-list svg { width: 30px; height: 30px; display: block; } .way-card--old .way-list svg { color: #aeb6c2; } .way-card--new .way-list svg { color: #6928ff; } /* ===================================================== ARROW BETWEEN OLD + NEW ===================================================== */ .system-transition { display: grid; place-items: center; width: 86px; margin: 0; padding: 0; } .system-transition > span { display: none; } .system-transition b { display: grid; place-items: center; width: 68px; height: 68px; margin: 0; border: 1px solid #dfe2e8; border-radius: 50%; background: #fff; color: #6827ff; font-size: 38px; line-height: 1; font-weight: 400; box-shadow: 0 4px 16px rgba(30, 40, 60, .025); transform: rotate(-90deg); } /* * Your existing mobile arrow appears vertical. * Rotate it for desktop so it points right. */ /* ===================================================== SYSTEM DIVIDER ===================================================== */ .system-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; width: 100%; margin: 44px 0 25px; } .system-divider::before, .system-divider::after { content: ""; display: block; height: 1px; background: #d5d8df; } .system-divider b { color: #6525ff; font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: .30em; white-space: nowrap; } /* ===================================================== 8 STEPS ===================================================== */ .eight-steps { display: grid; grid-template-columns: repeat( 8, minmax(0, 1fr) ); gap: 52px; width: 100%; margin: 0; padding: 0; } .system-step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 142px; min-height: 142px; padding: 18px 10px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; text-align: center; box-shadow: 0 4px 14px rgba(19, 27, 44, .025); } /* * Hide icons/descriptions on desktop * because reference only has: * * 1 * Market */ .system-step__icon, .system-step p { display: none; } .system-step small { display: block; margin: 0 0 11px; color: #6628ff; font-size: 42px; line-height: .9; font-weight: 900; letter-spacing: -.05em; } .system-step strong { display: block; color: #172034; font-size: 21px; line-height: 1; font-weight: 800; letter-spacing: -.025em; } /* arrows between step boxes */ .system-step:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -41px; transform: translateY(-52%); color: #6727ff; font-size: 31px; line-height: 1; font-weight: 400; pointer-events: none; } /* ===================================================== CTA ===================================================== */ .system-section .gold-button { display: flex; align-items: center; justify-content: center; gap: 30px; width: 515px; height: 70px; min-height: 70px; margin: 28px auto 0; padding: 0 30px; border: 0; border-radius: 9px; background: linear-gradient( 90deg, #ffc229 0%, #ffca37 100% ); color: #080b0e; text-decoration: none; font-size: 20px; line-height: 1; font-weight: 900; letter-spacing: -.025em; box-shadow: 0 10px 28px rgba(255, 191, 30, .14); } .system-section .gold-button svg { width: 26px; height: 26px; } /* small text below button */ .system-section .micro-tagline { margin: 16px auto 0; color: #788397; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .32em; text-align: center; } } /* ========================================================= LAPTOP DESKTOP Still desktop only. ========================================================= */ @media ( min-width: 1024px ) and ( max-width: 1500px ) { .system-section .home-shell { width: calc(100% - 70px); } .system-heading h2 { font-size: 54px; } .system-heading > p:last-child { font-size: 19px; } .system-section .system-comparison { width: 1100px; grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr); gap: 25px; } .system-section .way-card { min-height: 270px; padding: 31px 34px; } .way-card h3 { font-size: 30px; } .way-list li { font-size: 15px; } .eight-steps { gap: 42px; } .system-step { height: 126px; min-height: 126px; } .system-step small { font-size: 35px; } .system-step strong { font-size: 18px; } .system-step:not(:last-child)::after { right: -34px; font-size: 26px; } } /* ==================== 04 CONNECTED SYSTEM / STARTING POINTS ==================== */ /* * ========================================================= * D2C GAME * SECTION 04 * * ONE CONNECTED SYSTEM * + * THREE STARTING POINTS * * DESKTOP ONLY >= 1024px * * Mobile styles remain untouched. * ========================================================= */ @media (min-width: 1024px) { /* ===================================================== 04A — ONE CONNECTED SYSTEM ===================================================== */ .connected-visual { position: relative; margin: 0; padding: 0; background: #ffffff; overflow: hidden; } /* * Dark framed area. * The .home-shell width comes from desktop-layout.css. */ .connected-visual .home-shell { position: relative; padding: 28px 44px 0; overflow: hidden; background: radial-gradient( ellipse at 0% 0%, rgba(102, 39, 255, .43) 0%, rgba(102, 39, 255, .10) 18%, transparent 37% ), radial-gradient( ellipse at 100% 0%, rgba(102, 39, 255, .40) 0%, rgba(102, 39, 255, .08) 18%, transparent 37% ), linear-gradient( 180deg, #080818 0%, #050612 100% ); color: #ffffff; } /* * Corner purple curves. */ .connected-visual .home-shell::before, .connected-visual .home-shell::after { content: ""; position: absolute; z-index: 0; top: -310px; width: 520px; height: 520px; border-radius: 50%; border: 2px solid rgba(115, 48, 255, .62); box-shadow: 0 0 44px rgba(109, 43, 255, .32); pointer-events: none; } .connected-visual .home-shell::before { left: -270px; } .connected-visual .home-shell::after { right: -270px; } /* ===================================================== DARK SECTION HEADING ===================================================== */ .connected-visual .home-heading { position: relative; z-index: 3; width: 100%; max-width: 900px; margin: 0 auto 12px; text-align: center; } .connected-visual .home-kicker { margin: 0 0 14px; color: #aa63ff; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .42em; text-transform: uppercase; } .connected-visual .home-heading h2 { margin: 0; color: #ffffff; font-size: 52px; line-height: .93; font-weight: 900; letter-spacing: -.055em; } .connected-visual .home-heading h2 .purple-text, .connected-visual .home-heading h2 .connected-title-accent { color: #9344ff; } .connected-visual .home-heading > p:last-child { max-width: 760px; margin: 11px auto 0; color: #e5e5ec; font-size: 16px; line-height: 1.32; font-weight: 400; letter-spacing: -.01em; } /* ===================================================== CONNECTED SYSTEM GRAPHIC ===================================================== */ .connected-diagram { position: relative; z-index: 2; display: block; width: 100%; max-width: 1080px; height: 300px; margin: 7px auto 0; overflow: hidden; } picture.connected-diagram { display: block; } .connected-diagram img, img.connected-diagram { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } /* ===================================================== 04B — THREE STARTING POINTS ===================================================== */ .starting-section { position: relative; margin: 0; padding: 27px 0 62px; overflow: hidden; background: linear-gradient( 180deg, #ffffff 0%, #ffffff 84%, #fbf9ff 100% ); color: #080a0e; } /* * Keep same 1440px section width. */ .starting-section .home-shell { position: relative; } /* ===================================================== STARTING POINTS HEADING ===================================================== */ .starting-section .home-heading { width: 100%; max-width: 900px; margin: 0 auto 18px; text-align: center; } .starting-section .home-kicker { margin: 0 0 12px; color: #6428ff; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .40em; text-transform: uppercase; } .starting-section .home-heading h2 { margin: 0; color: #06080c; font-size: 46px; line-height: .94; font-weight: 900; letter-spacing: -.055em; } .starting-section .home-heading h2 .purple-text, .starting-section .home-heading h2 .starting-title-accent { color: #6728ff; } .starting-section .home-heading > p:last-child { max-width: 770px; margin: 11px auto 0; color: #536078; font-size: 14px; line-height: 1.36; font-weight: 400; } /* ===================================================== THREE CARD GRID ===================================================== */ .starting-stack { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 28px; width: 1200px; max-width: 100%; margin: 22px auto 0; align-items: stretch; } /* ===================================================== CARD ===================================================== */ .starting-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e1e5ec; border-radius: 10px; background: #ffffff; box-shadow: 0 8px 24px rgba(20, 29, 48, .07); } /* ===================================================== CARD IMAGE ===================================================== */ .starting-card__visual { position: relative; width: 100%; height: 150px; min-height: 150px; overflow: hidden; background: #10151c; } .starting-card__visual picture { display: block; width: 100%; height: 100%; } .starting-card__visual picture img, .starting-card__visual > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* * Image dark shade. */ .starting-card__visual::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient( 90deg, rgba(5, 8, 13, .70) 0%, rgba(5, 8, 13, .30) 48%, rgba(5, 8, 13, .04) 100% ); pointer-events: none; } /* * Text over photo. */ .starting-card__visual strong { position: absolute; z-index: 2; top: 24px; left: 22px; max-width: 155px; margin: 0; color: #ffffff; font-size: 11px; line-height: 1.18; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } /* ===================================================== CARD BODY ===================================================== */ .starting-card__body { display: flex; flex-direction: column; flex: 1; min-height: 310px; padding: 16px 20px 18px; } /* ===================================================== ICON + STARTING POINT + TITLE ===================================================== */ .starting-card__head { display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: start; } .starting-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #f0e8ff; color: #6728ff; } .starting-icon svg { display: block; width: 27px; height: 27px; } .starting-card__head small { display: block; margin: 3px 0 6px; color: #6728ff; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } .starting-card h3 { margin: 0; color: #080a0e; font-size: 18px; line-height: 1.04; font-weight: 900; letter-spacing: -.035em; } /* ===================================================== CARD INTRO ===================================================== */ .starting-card__body > p { margin: 6px 0 0 64px; color: #566278; font-size: 11px; line-height: 1.32; font-weight: 400; } .starting-card__body > p::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 11px; background: #e2e6ec; } /* ===================================================== BULLETS ===================================================== */ .starting-card .mini-check-list { display: grid; gap: 7px; margin: 12px 0 16px; padding: 0; list-style: none; } .starting-card .mini-check-list li { display: grid; grid-template-columns: 17px 1fr; column-gap: 9px; align-items: start; margin: 0; color: #354057; font-size: 14px; line-height: 1.26; font-weight: 450; } .starting-card .mini-check-list svg { display: block; width: 16px; height: 16px; color: #6528ff; } /* ===================================================== GOLD BUTTON ===================================================== */ .starting-card .gold-button { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; height: 44px; min-height: 44px; margin-top: auto; padding: 0 16px; border: 0; border-radius: 7px; background: linear-gradient( 90deg, #ffc127 0%, #ffca37 100% ); color: #080b0e; text-decoration: none; font-size: 13px; line-height: 1; font-weight: 900; letter-spacing: -.018em; box-shadow: 0 5px 13px rgba(255, 191, 24, .10); } .starting-card .gold-button svg { width: 16px; height: 16px; } /* ===================================================== SECTION BOTTOM MICRO TEXT ===================================================== */ .starting-section .micro-tagline { margin: 22px auto 0; color: #6828ff; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .34em; text-align: center; text-transform: uppercase; } } /* ========================================================= LAPTOP DESKTOP Mobile remains unchanged. ========================================================= */ @media ( min-width: 1024px ) and ( max-width: 1500px ) { .connected-visual .home-heading h2 { font-size: 46px; } .connected-diagram { height: 270px; max-width: 980px; } .starting-section .home-heading h2 { font-size: 41px; } .starting-stack { width: 1100px; gap: 22px; } .starting-card__visual { height: 138px; min-height: 138px; } } /* ==================== 05 D2C OS ==================== */ /* * ========================================================= * D2C GAME * SECTION 05 — D2C OS * * DESKTOP ONLY * Mobile remains unchanged. * ========================================================= */ /* * Desktop-only elements. * Never shown on mobile. */ .os-side, .os-section__background, .os-section__background-shade { display: none; } @media (min-width: 1024px) { .os-side, .os-section__background, .os-section__background-shade { display: block; } /* ===================================================== SECTION ===================================================== */ .os-section { position: relative; margin: 0; padding: 0; background: #ffffff; overflow: hidden; } /* * Width comes from desktop-layout.css: * 1440px maximum. */ .os-section .home-shell { position: relative; padding: 0; overflow: hidden; background: #ffffff; } /* ===================================================== DARK TOP AREA ===================================================== */ .os-section .home-shell { position: relative; min-height: 900px; overflow: hidden; background: #080d15; } /* uploaded background */ .os-section__background { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 650px; overflow: hidden; } .os-section__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* * This shade makes text readable * even if administrator uploads a bright image. */ .os-section__background-shade { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 650px; background: linear-gradient( 90deg, rgba(5,9,15,.82) 0%, rgba(5,9,15,.48) 31%, rgba(5,9,15,.30) 55%, rgba(5,9,15,.42) 77%, rgba(5,9,15,.58) 100% ), linear-gradient( 180deg, rgba(5,9,15,.20) 0%, rgba(5,9,15,.05) 58%, rgba(5,9,15,.30) 100% ); pointer-events: none; } /* content must sit above background */ .os-heading, .os-dashboard, .os-side { position: relative; z-index: 3; } .os-process, .os-footer-line { position: relative; z-index: 4; } .os-side-lines { display: grid; gap: 2px; } .os-side-lines span { display: block; color: #d5d8df; font-size: 16px; line-height: 1.28; font-weight: 400; } /* * Make everything above process row * appear above dark background. */ .os-heading, .os-dashboard, .os-side { position: relative; z-index: 3; } /* ===================================================== HEADING ===================================================== */ .os-heading { width: 100%; max-width: 1050px; margin: 0 auto; padding: 35px 0 0; text-align: center; } .os-heading .home-kicker { margin: 0 0 16px; color: #9a4eff; font-size: 14px; line-height: 1; font-weight: 800; letter-spacing: .38em; text-transform: uppercase; } .os-heading h2 { margin: 0; color: #ffffff; font-size: 58px; line-height: .95; font-weight: 900; letter-spacing: -.055em; } .os-heading h2 .purple-text, .os-heading h2 .os-title-accent { color: #772fff; } /* * Complexity → Clarity → Execution */ .os-heading h2 span { white-space: nowrap; } .os-heading h3 { max-width: none; margin: 13px auto 0; color: #ffffff; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; } .os-heading > p:last-of-type { max-width: 710px; margin: 9px auto 0; color: #d8dce4; font-size: 16px; line-height: 1.35; font-weight: 400; } /* ===================================================== CTA ROW ===================================================== */ .os-heading .gold-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; width: 290px; height: 50px; min-height: 50px; margin: 15px 12px 0 0; padding: 0 20px; border: 0; border-radius: 7px; background: linear-gradient( 90deg, #ffc229, #ffca36 ); color: #090c10; text-decoration: none; font-size: 16px; line-height: 1; font-weight: 900; box-shadow: 0 8px 22px rgba(255, 192, 35, .13); } .os-heading .gold-button svg { width: 19px; height: 19px; } .training-link { display: inline-flex; align-items: center; gap: 11px; margin: 15px 0 0 10px; color: #ffffff; text-decoration: none; font-size: 14px; line-height: 1; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.48); padding-bottom: 5px; } .training-link svg { width: 27px; height: 27px; } /* ===================================================== LEFT SIDE — COMPLEXITY ===================================================== */ .os-side { position: absolute; top: 245px; color: #ffffff; } .os-side--left { left: 105px; width: 200px; } .os-side small { display: block; margin-bottom: 8px; color: #d2d5dc; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; } .os-side h3 { margin: 0 0 12px; color: #ffffff; font-size: 23px; line-height: 1; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .os-side > p { margin: 0; color: #d5d8df; font-size: 16px; line-height: 1.35; font-weight: 400; } /* ===================================================== RIGHT SIDE — EXECUTION ===================================================== */ .os-side--right { right: 75px; width: 245px; } .os-execution-list { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; } .os-execution-list li { display: grid; grid-template-columns: 25px 1fr; gap: 10px; align-items: center; color: #ffffff; font-size: 14px; line-height: 1.25; } .os-execution-list b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #7731ff; color: #ffffff; font-size: 13px; box-shadow: 0 0 12px rgba(119, 49, 255, .40); } /* ===================================================== DASHBOARD / LAPTOP ===================================================== */ .os-dashboard { display: block; width: 730px; max-width: 730px; height: 390px; margin: 21px auto 0; border-radius: 15px; overflow: hidden; object-fit: contain; object-position: center bottom; filter: drop-shadow( 0 18px 35px rgba(0,0,0,.35) ); border: 0; box-shadow: none; } } picture.os-dashboard { display: block; } picture.os-dashboard img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } /* ===================================================== PROCESS ROW — WHITE PART ===================================================== */ .os-process { position: relative; z-index: 4; display: grid; grid-template-columns: repeat( 5, minmax(0, 1fr) ); gap: 0; width: 100%; max-width:100%; margin: 0; padding: 21px 75px 12px; background: #ffffff; border: 0; } .os-process__row { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-width: 0; padding: 0 23px; border: 0; text-align: center; } /* ===================================================== ARROWS BETWEEN PROCESS ITEMS ===================================================== */ .os-process__row:not(:last-child)::after { content: "→"; position: absolute; top: 25px; right: -8px; color: #8290a6; font-size: 27px; line-height: 1; font-weight: 300; } /* ===================================================== PROCESS ICON ===================================================== */ .os-process__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 0 10px; border: 0; border-radius: 50%; background: #f2eaff; color: #6728ff; } .os-process__icon svg { display: block; width: 31px; height: 31px; } /* Hide mobile step numbers */ .os-process__row > small { display: none; } /* ===================================================== PROCESS TEXT ===================================================== */ .os-process__row h3 { margin: 0; color: #07090d; font-size: 17px; line-height: 1; font-weight: 900; letter-spacing: -.025em; } .os-process__row p { max-width: 190px; margin: 5px auto 0; color: #536079; font-size: 12px; line-height: 1.25; font-weight: 400; } /* ===================================================== FOOTER LINE ===================================================== */ .os-footer-line { position: relative; z-index: 4; margin: 0; padding: 22px 0 31px; background: #ffffff; color: #6429ff; border: 0; text-align: center; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .42em; text-transform: uppercase; } .os-footer-line::after { content: ""; display: block; width: 58px; height: 2px; margin: 18px auto 0; background: #7633ff; } } /* ========================================================= LAPTOP DESKTOP Still desktop only. ========================================================= */ @media ( min-width: 1024px ) and ( max-width: 1500px ) { .os-heading h2 { font-size: 51px; } .os-heading h3 { font-size: 25px; } .os-side--left { left: 55px; } .os-side--right { right: 45px; width: 220px; } .os-dashboard { width: 670px; max-width: 670px; } .os-process { padding-left: 45px; padding-right: 45px; } } /* ========================================================================== 06 ABOUT ROMAN — DESKTOP LAYOUT ========================================================================== */ @media (min-width: 1024px) { .roman-section { position: relative; padding: 64px 0; overflow: hidden; background: #fff; } .roman-shell { position: relative; display: grid; grid-template-columns: 46% 54%; grid-template-areas: \"photo copy\" \"stats stats\" \"quote quote\" \"signature signature\"; width: 100%; overflow: hidden; border: 1px solid var(--d2c-border); border-radius: var(--d2c-radius); background: linear-gradient(135deg,#fff 0%,#f7f8fa 72%,#f1f2f5 100%); box-shadow: var(--d2c-shadow); } .roman-shell::before, .roman-shell::after { content: \"\"; position: absolute; z-index: 0; pointer-events: none; } .roman-shell::before { top:-160px; right:-150px; width:520px; height:520px; transform:rotate(45deg); background:linear-gradient(135deg,rgba(232,234,239,.55),rgba(255,255,255,0)); } .roman-shell::after { bottom:-250px; left:-240px; width:500px; height:500px; transform:rotate(45deg); background:linear-gradient(135deg,rgba(237,239,243,.5),transparent); } .roman-media { position:relative; z-index:2; grid-area:photo; min-width:0; min-height:520px; overflow:hidden; background:#11161c; } .roman-photo, picture.roman-photo { display:block; width:100%; height:100%; } .roman-photo img, img.roman-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .roman-copy { position:relative; z-index:2; grid-area:copy; min-width:0; padding:55px 55px 34px 54px; } .roman-copy > p:not(.home-kicker) { max-width:680px; margin:0 0 13px; } .roman-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:28px; } .roman-role { position:relative; min-width:0; padding:0 22px; border-left:1px solid var(--d2c-border); } .roman-role:first-child { padding-left:0; border-left:0; } .roman-role:last-child { padding-right:0; } .roman-role__icon { display:grid; place-items:center; width:50px; height:50px; margin:0 0 12px; border-radius:12px; background:linear-gradient(145deg,#f3f1f9,#fff); color:#273349; box-shadow:0 4px 14px rgba(20,29,46,.04); } .roman-role__icon svg { width:27px; height:27px; } .roman-role strong { display:block; margin:0 0 5px; color:var(--d2c-black); font-size:14px; line-height:1; font-weight:900; } .roman-role p { max-width:170px; margin:0; } .roman-stats { position:relative; z-index:3; grid-area:stats; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:27px 38px; border-top:1px solid var(--d2c-border); border-bottom:1px solid var(--d2c-border); background:rgba(255,255,255,.64); } .roman-stat, .roman-stat--desktop-only { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:0 24px; text-align:center; border-left:1px solid var(--d2c-border); } .roman-stat:first-child { border-left:0; } .roman-stat strong { display:block; color:var(--d2c-black); font-size:30px; line-height:1; font-weight:900; letter-spacing:-.045em; } .roman-stat span { display:block; margin-top:7px; color:var(--d2c-copy); font-size:var(--d2c-small); line-height:1.25; } .roman-quote { position:relative; z-index:3; grid-area:quote; max-width:800px; margin:0 auto; padding:27px 30px 8px; border:0; color:#303b4d; text-align:center; font-size:var(--d2c-body); line-height:1.4; font-weight:500; font-style:italic; } .roman-signature { position:relative; z-index:3; grid-area:signature; display:flex; align-items:center; justify-content:center; gap:14px; margin:0; padding:0 0 34px; color:#5c6879; font-size:var(--d2c-micro); line-height:1; font-weight:800; letter-spacing:.30em; } .roman-signature span { display:block; width:28px; height:1px; background:#748095; } } @media (min-width:1024px) and (max-width:1500px) { .roman-media { min-height:470px; } .roman-copy { padding:44px 42px 28px; } .roman-role { padding:0 16px; } .roman-stat strong { font-size:27px; } } /* ==================== 07 PROOF FROM THE REAL WORLD ==================== */ /* * ========================================================= * D2C GAME * 07 PROOF FROM THE REAL WORLD * * DESKTOP ONLY * * Mobile is intentionally untouched. * Width comes from desktop-layout.css. * ========================================================= */ @media (min-width: 1024px) { /* ===================================================== SECTION ===================================================== */ .real-proof-section { position: relative; padding: 56px 0 0; overflow: hidden; background: linear-gradient( 180deg, #ffffff 0%, #fdfdfe 100% ); color: #080a0e; } /* * IMPORTANT: * No width here. * * desktop-layout.css controls * .home-shell = 1440px. */ .real-proof-section .home-shell { position: relative; z-index: 2; } /* ===================================================== VERY SUBTLE BACKGROUND GEOMETRY ===================================================== */ .real-proof-section::before, .real-proof-section::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } .real-proof-section::before { top: -150px; left: -220px; width: 700px; height: 480px; transform: rotate(-12deg); background: linear-gradient( 145deg, rgba(239,241,246,.56), rgba(255,255,255,0) ); } .real-proof-section::after { top: -100px; right: -220px; width: 670px; height: 470px; transform: rotate(12deg); background: linear-gradient( 215deg, rgba(239,241,246,.52), rgba(255,255,255,0) ); } /* ===================================================== HEADING ===================================================== */ .real-proof-section .home-heading { width: 100%; max-width: 1120px; margin: 0 auto 30px; text-align: center; } .real-proof-section .home-kicker { margin: 0 0 17px; color: #556176; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .35em; text-transform: uppercase; } .real-proof-section .home-heading h2 { margin: 0; color: #05070b; font-size: 57px; line-height: .96; font-weight: 900; letter-spacing: -.055em; } .real-proof-section .home-heading > p:last-child { max-width: 1040px; margin: 13px auto 0; color: #566278; font-size: 18px; line-height: 1.32; font-weight: 400; letter-spacing: -.012em; } /* ===================================================== THREE CARD GRID ===================================================== */ .proof-case-stack { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 10px; width: 100%; margin: 26px 0 22px; align-items: stretch; } /* ===================================================== PROOF CARD ===================================================== */ .proof-case { position: relative; display: block; min-width: 0; height: 392px; overflow: hidden; border-radius: 7px; background: #0a1018; color: #ffffff; text-decoration: none; box-shadow: 0 5px 18px rgba(14,22,35,.08); } /* image wrapper generated by home_picture */ .proof-case picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .proof-case picture img, .proof-case > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; } /* ===================================================== CARD SHADE ===================================================== */ .proof-case__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient( 180deg, rgba(4,8,13,.02) 0%, rgba(4,8,13,.04) 37%, rgba(4,8,13,.54) 62%, rgba(4,8,13,.95) 100% ); pointer-events: none; } /* ===================================================== CARD COPY ===================================================== */ .proof-case__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 24px 21px; } .proof-case__copy small { display: block; margin: 0 0 8px; color: #d8dde6; font-size: 15px; line-height: 1; font-weight: 500; } .proof-case__copy h3 { max-width: 370px; margin: 0 0 11px; color: #ffffff; font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -.045em; } .proof-case__copy p { max-width: 390px; margin: 0 0 16px; color: #d9dde4; font-size: 16px; line-height: 1.28; font-weight: 400; } /* line above tags */ .proof-case__copy p::after { content: ""; display: block; width: calc(100% - 48px); height: 1px; margin-top: 16px; background: rgba(255,255,255,.18); } /* tags */ .proof-case__copy > span { display: block; max-width: 80%; color: #e2e5ea; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; } /* ===================================================== CIRCLE ARROW ===================================================== */ .proof-case__arrow { position: absolute; z-index: 4; right: 20px; bottom: 17px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #ffffff; font-size: 21px; line-height: 1; font-weight: 400; transition: background .2s ease, transform .2s ease; } /* ===================================================== HOVER — DESKTOP ===================================================== */ .proof-case:hover picture img, .proof-case:hover > img { transform: scale(1.025); } .proof-case:hover .proof-case__arrow { transform: translateX(3px); background: rgba(255,255,255,.09); } /* ===================================================== DARK STATS BAND ===================================================== */ .proof-stats-band { position: relative; min-height: 260px; margin: 0; padding: 38px 42px 27px; overflow: hidden; background: linear-gradient( 180deg, #101925 0%, #071019 100% ); color: #ffffff; } /* uploaded background */ .proof-stats-band__background { position: absolute; z-index: 0; inset: 0; overflow: hidden; } .proof-stats-band__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } /* background shade */ .proof-stats-band__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient( 180deg, rgba(6,14,23,.67) 0%, rgba(5,12,20,.82) 58%, rgba(4,10,17,.93) 100% ); pointer-events: none; } /* ===================================================== FOUR STAT ITEMS ===================================================== */ .proof-stats-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat( 4, minmax(0, 1fr) ); width: 100%; max-width: 1280px; margin: 0 auto; align-items: stretch; } .proof-stats-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 135px; padding: 8px 32px; text-align: center; border-left: 1px solid rgba(255,255,255,.23); } .proof-stats-grid > div:first-child { border-left: 0; } /* icons */ .proof-stats-grid svg { display: block; width: 36px; height: 36px; margin: 0 0 13px; color: #e6e9ee; } /* value */ .proof-stats-grid strong { display: block; margin: 0; color: #ffffff; font-size: 29px; line-height: 1; font-weight: 900; letter-spacing: -.035em; } /* description */ .proof-stats-grid span { display: block; margin-top: 7px; color: #d9dde4; font-size: 14px; line-height: 1.25; font-weight: 400; } /* ===================================================== BOTTOM LINE ===================================================== */ .proof-stats-band > p { position: relative; width:100%; z-index: 2; margin: 23px auto 0; color: #e2e5eb; text-align: center; font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; } .proof-stats-band > p::after { content: ""; display: block; width: 20px; height: 1px; margin: 21px auto 0; background: #ffffff; } } @media ( min-width: 1024px ) and ( max-width: 1500px ) { .real-proof-section .home-heading h2 { font-size: 50px; } .real-proof-section .home-heading > p:last-child { font-size: 16px; } .proof-case { height: 350px; } .proof-case__copy h3 { font-size: 26px; } .proof-case__copy p { font-size: 14px; } .proof-stats-grid strong { font-size: 26px; } .proof-stats-grid span { font-size: 13px; } } /* ========================================================================== 08 MASTERCLASS — DESKTOP LAYOUT ========================================================================== */ @media (min-width: 1024px) { .masterclass-section { position:relative; padding:64px 0; overflow:hidden; background:#fff; } .masterclass-panel { position:relative; width:100%; min-height:660px; overflow:hidden; border-radius:var(--d2c-radius); background:var(--d2c-dark); color:#fff; } .masterclass-bg { position:absolute; z-index:0; inset:0; display:block; overflow:hidden; } .masterclass-bg img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .masterclass-shade { position:absolute; z-index:1; inset:0; display:block; background:linear-gradient(90deg,rgba(4,10,16,.98) 0%,rgba(4,10,16,.96) 20%,rgba(4,10,16,.90) 37%,rgba(4,10,16,.68) 48%,rgba(4,10,16,.26) 62%,rgba(4,10,16,.02) 78%),linear-gradient(180deg,rgba(5,10,16,.06) 0%,rgba(5,10,16,.03) 65%,rgba(5,10,16,.20) 100%); pointer-events:none; } .masterclass-copy { position:relative; z-index:3; width:53%; max-width:690px; padding:67px 0 45px 72px; } .masterclass-intro { max-width:560px; margin:22px 0 24px; } .masterclass-features { display:grid; gap:17px; margin:0 0 27px; } .masterclass-features article { display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:center; } .masterclass-feature-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(255,255,255,.55); border-radius:var(--d2c-radius-sm); color:#fff; } .masterclass-feature-icon svg { width:25px; height:25px; } .masterclass-features strong { display:block; margin:0; color:#fff; font-size:15px; line-height:1.15; font-weight:800; } .masterclass-features p { margin:4px 0 0; color:#cdd2da; } .masterclass-button { display:flex; align-items:center; justify-content:center; gap:22px; width:410px; margin:0; padding:0 25px; text-decoration:none; } .masterclass-button svg { width:20px; height:20px; } .masterclass-meta { display:flex; align-items:center; gap:0; margin:18px 0 0; color:#d9dde3; font-size:var(--d2c-small); line-height:1; } .masterclass-meta > span { display:flex; align-items:center; gap:8px; padding:0 17px; border-left:1px solid rgba(255,255,255,.30); white-space:nowrap; } .masterclass-meta > span:first-child { padding-left:0; border-left:0; } .masterclass-meta b { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:17px; font-weight:400; } } @media (min-width:1024px) and (max-width:1500px) { .masterclass-panel { min-height:600px; } .masterclass-copy { width:55%; padding:58px 0 40px 58px; } .masterclass-intro { max-width:500px; } .masterclass-button { width:380px; } } /* ==================== 09 INSIGHTS (DESKTOP ONLY) ==================== */ /* * ========================================================= * D2C GAME * 09 INSIGHTS * * DESKTOP ONLY * Width controlled by desktop-layout.css. * ========================================================= */ @media (min-width: 1024px) { /* ===================================================== SECTION ===================================================== */ .insights-section { position: relative; padding: 58px 0 55px; overflow: hidden; background: linear-gradient( 180deg, #ffffff 0%, #fbfbfe 100% ); color: #080a0e; } .insights-section .home-shell { position: relative; z-index: 2; } /* ===================================================== HEADING ===================================================== */ .insights-heading { width: 100%; max-width: 1120px; margin: 0 auto 30px; text-align: center; } .insights-heading .home-kicker { margin: 0 0 19px; color: #6628ff; font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .27em; text-transform: uppercase; } .insights-heading h2 { margin: 0; color: #07090d; font-size: 58px; line-height: .96; font-weight: 900; letter-spacing: -.055em; } .insights-heading h2 span { color: #ffbc20; } .insights-heading h2 span::after { content: ""; display: block; width: 255px; height: 2px; margin: 8px 0 0 auto; background: #ffbc20; transform: rotate(3deg); transform-origin: left; } .insights-heading > p:last-child { max-width: 800px; margin: 18px auto 0; color: #526078; font-size: 18px; line-height: 1.45; font-weight: 400; } /* ===================================================== ARTICLES GRID ===================================================== */ .insights-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 20px; width: 100%; margin: 28px 0 30px; } /* ===================================================== ARTICLE CARD ===================================================== */ .insight-card { min-width: 0; overflow: hidden; border: 1px solid #dfe3e9; border-radius: 9px; background: #ffffff; box-shadow: 0 5px 17px rgba(21, 30, 48, .035); } /* ===================================================== IMAGE ===================================================== */ .insight-card__image { position: relative; display: block; width: 100%; height: 260px; overflow: hidden; background: #080b12; } .insight-card__image picture { display: block; width: 100%; height: 100%; } .insight-card__image picture img, .insight-card__image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; } .insight-card:hover .insight-card__image img { transform: scale(1.025); } /* category pill */ .insight-card__category { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 6px; background: #6426ed; color: #ffffff; font-size: 11px; line-height: 1; font-weight: 800; text-transform: uppercase; } /* ===================================================== BODY ===================================================== */ .insight-card__body { display: flex; flex-direction: column; min-height: 270px; padding: 18px 21px 20px; } /* ===================================================== META ===================================================== */ .insight-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 17px; color: #667187; font-size: 12px; line-height: 1; } .insight-card__meta span { display: flex; align-items: center; gap: 7px; } .insight-card__meta svg { width: 16px; height: 16px; color: #692cff; } .insight-card__meta span:last-child::before { content: "•"; margin-right: 3px; } /* ===================================================== TITLE ===================================================== */ .insight-card h3 { margin: 0 0 13px; color: #0a0c10; font-size: 21px; line-height: 1.14; font-weight: 900; letter-spacing: -.035em; } .insight-card h3 a { color: inherit; text-decoration: none; } /* ===================================================== DESCRIPTION ===================================================== */ .insight-card__body > p { margin: 0 0 18px; color: #536078; font-size: 14px; line-height: 1.46; font-weight: 400; } /* ===================================================== READ LINK ===================================================== */ .insight-card__link { display: inline-flex; align-items: center; gap: 11px; width: max-content; margin-top: auto; color: #6426ff; text-decoration: none; font-size: 14px; line-height: 1; font-weight: 800; } .insight-card__link span { font-size: 20px; transition: transform .2s ease; } .insight-card__link:hover span { transform: translateX(4px); } /* ===================================================== NEWSLETTER PANEL ===================================================== */ .insights-newsletter { display: grid; grid-template-columns: 48% 52%; align-items: center; min-height: 150px; padding: 20px 24px; border: 1px solid #daccff; border-radius: 11px; background: linear-gradient( 100deg, #faf8ff 0%, #f4efff 100% ); } /* ===================================================== NEWSLETTER LEFT ===================================================== */ .insights-newsletter__intro { display: grid; grid-template-columns: 105px 1fr; gap: 20px; align-items: center; } .insights-newsletter__icon { display: grid; place-items: center; width: 95px; height: 95px; border: 2px solid #ffffff; border-radius: 50%; background: #eee5ff; color: #6828ff; box-shadow: 0 5px 20px rgba(96, 40, 220, .05); } .insights-newsletter__icon svg { width: 49px; height: 49px; } .insights-newsletter__intro small { display: block; margin: 0 0 7px; color: #6628ff; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .insights-newsletter__intro h3 { max-width: 470px; margin: 0 0 5px; color: #080a0e; font-size: 24px; line-height: 1.08; font-weight: 900; letter-spacing: -.035em; } .insights-newsletter__intro p { margin: 0; color: #586379; font-size: 13px; line-height: 1.3; } /* ===================================================== NEWSLETTER FORM AREA ===================================================== */ .insights-newsletter__form-area { min-width: 0; padding-left: 25px; } .insights-newsletter__form { display: grid; grid-template-columns: 1fr 200px; width: 100%; height: 51px; } .insights-newsletter__form input { min-width: 0; height: 51px; padding: 0 18px; border: 1px solid #d7dce6; border-right: 0; border-radius: 7px 0 0 7px; background: #ffffff; color: #11141a; font-size: 14px; outline: 0; } .insights-newsletter__form input::placeholder { color: #8b94a5; } .insights-newsletter__form button { height: 51px; padding: 0 18px; border: 0; border-radius: 0 7px 7px 0; background: linear-gradient( 90deg, #6325e8, #6828ff ); color: #ffffff; font-size: 14px; font-weight: 800; cursor: pointer; } /* ===================================================== NEWSLETTER BENEFITS ===================================================== */ .insights-newsletter__benefits { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: #4f5a70; font-size: 11px; } .insights-newsletter__benefits span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .insights-newsletter__benefits b { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #6528ff; border-radius: 50%; color: #6528ff; font-size: 9px; line-height: 1; } } @media ( min-width: 1024px ) and ( max-width: 1500px ) { .insights-heading h2 { font-size: 50px; } .insight-card__image { height: 230px; } .insight-card h3 { font-size: 19px; } .insights-newsletter { grid-template-columns: 46% 54%; } .insights-newsletter__intro { grid-template-columns: 85px 1fr; } .insights-newsletter__icon { width: 78px; height: 78px; } .insights-newsletter__intro h3 { font-size: 21px; } .insights-newsletter__form { grid-template-columns: 1fr 170px; } } /* ========================================================================== FINAL DESIGN-SYSTEM NORMALIZATION These rules intentionally come LAST and replace conflicting typography, colors, buttons and shell widths from the old section-specific files. ========================================================================== */ @media (min-width: 1024px) { /* Shared width — this wins over legacy 1600/1716/1740px rules. */ .home-page .home-shell, .home-page .home-hero__content, .home-page .header-inner, .home-page .path-section .home-shell, .home-page .system-section .home-shell { width: min(var(--d2c-desktop-width), calc(100% - var(--d2c-desktop-gutter-total))); max-width: none; margin-left: auto; margin-right: auto; } /* Shared section H2 */ .home-page .path-section .home-heading h2, .home-page .system-heading h2, .home-page .connected-visual .home-heading h2, .home-page .starting-section .home-heading h2, .home-page .os-heading h2, .home-page .roman-copy h2, .home-page .real-proof-section .home-heading h2, .home-page .masterclass-copy h2, .home-page .insights-heading h2 { margin-top: 0; font-size: var(--d2c-h2); line-height: .98; font-weight: 900; letter-spacing: -.05em; } /* Hero is the only H1 scale. */ .home-page .home-hero h1 { font-size: var(--d2c-h1); line-height: .98; font-weight: 900; letter-spacing: -.05em; } /* Same kicker/eyebrow scale across sections. */ .home-page .path-section .home-kicker, .home-page .system-heading .home-kicker, .home-page .connected-visual .home-kicker, .home-page .starting-section .home-kicker, .home-page .os-heading .home-kicker, .home-page .roman-copy .home-kicker, .home-page .real-proof-section .home-kicker, .home-page .masterclass-copy .home-kicker, .home-page .insights-heading .home-kicker { font-size: var(--d2c-kicker); line-height: 1; font-weight: 800; letter-spacing: .30em; text-transform: uppercase; } /* Same lead paragraph scale across major sections. */ .home-page .path-section .home-heading > p:last-child, .home-page .system-heading > p:last-child, .home-page .connected-visual .home-heading > p:last-child, .home-page .starting-section .home-heading > p:last-child, .home-page .os-heading > p:last-of-type, .home-page .real-proof-section .home-heading > p:last-child, .home-page .insights-heading > p:last-child, .home-page .masterclass-intro { font-size: var(--d2c-intro); line-height: 1.42; font-weight: 400; letter-spacing: -.012em; } /* Main body copy */ .home-page .home-hero__copy, .home-page .path-card__copy > p, .home-page .way-list li, .home-page .os-side-lines span, .home-page .os-side > p, .home-page .roman-copy > p:not(.home-kicker), .home-page .proof-case__copy p { font-size: var(--d2c-body); line-height: 1.45; } /* Small/component copy */ .home-page .starting-card__body > p, .home-page .starting-card .mini-check-list li, .home-page .roman-role p, .home-page .roman-stat span, .home-page .masterclass-features p, .home-page .masterclass-meta, .home-page .insight-card__meta, .home-page .insight-card__body > p, .home-page .proof-stats-grid span { font-size: var(--d2c-small); line-height: 1.35; } /* Micro labels */ .home-page .path-card__label, .home-page .way-pill, .home-page .starting-card__head small, .home-page .proof-case__copy small, .home-page .insight-card__category, .home-page .os-side small, .home-page .roman-signature, .home-page .micro-tagline { font-size: var(--d2c-micro); } /* Component title hierarchy */ .home-page .path-card h3 { font-size: var(--d2c-h3-lg); line-height: 1; } .home-page .way-card h3, .home-page .proof-case__copy h3 { font-size: var(--d2c-h3); line-height: 1.05; } .home-page .starting-card h3, .home-page .insight-card h3 { font-size: var(--d2c-card-title); line-height: 1.12; } /* Brand colors */ .home-page .paths-title-accent, .home-page .purple-text, .home-page .system-title-accent, .home-page .connected-title-accent, .home-page .starting-title-accent, .home-page .os-title-accent, .home-page .home-hero h1 span { color: var(--d2c-purple); } .home-page .insights-heading h2 span, .home-page .masterclass-copy h2 span { color: var(--d2c-gold); } /* One gold-button system everywhere. Width remains section-specific. */ .home-page .gold-button, .home-page .home-hero__primary, .home-page .masterclass-button, .home-page .site-nav a:last-child { min-height: var(--d2c-button-height); height: var(--d2c-button-height); border: 0; border-radius: var(--d2c-radius-sm); background: linear-gradient(90deg, var(--d2c-gold) 0%, var(--d2c-gold-end) 100%); color: var(--d2c-black); font-size: 16px; line-height: 1; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(255, 195, 41, .13); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .home-page .gold-button:hover, .home-page .home-hero__primary:hover, .home-page .masterclass-button:hover, .home-page .site-nav a:last-child:hover { transform: translateY(-1px); background: linear-gradient(90deg, var(--d2c-gold-hover) 0%, var(--d2c-gold-end) 100%); box-shadow: 0 10px 26px rgba(255, 195, 41, .18); } /* Unified card geometry */ .home-page .path-card, .home-page .way-card, .home-page .starting-card, .home-page .roman-shell, .home-page .proof-case, .home-page .insight-card, .home-page .insights-newsletter, .home-page .masterclass-panel { border-radius: var(--d2c-radius); } /* Shared neutral colors. */ .home-page .path-section .home-heading > p:last-child, .home-page .system-heading > p:last-child, .home-page .starting-section .home-heading > p:last-child, .home-page .real-proof-section .home-heading > p:last-child, .home-page .insights-heading > p:last-child, .home-page .roman-copy > p:not(.home-kicker) { color: var(--d2c-copy); } /* Purple secondary action/link system. */ .home-page .home-hero__secondary, .home-page .insight-card__link { color: var(--d2c-purple); font-weight: 800; } }