/* ====================================================================== DDA EXPERIENCE COMPOSITIONS — une grammaire par usage, pas une grille répétée. Les sélecteurs restent attachés aux vues existantes. ====================================================================== */ /* Shared chapter framing: each page gets an opening posture and a different density before its functional content begins. */ #path,#progress,#journal,#resources,#markets,#profile,#membership,#brokers{ position:relative;isolation:isolate; } #path:before,#progress:before,#journal:before,#resources:before,#markets:before,#profile:before{ content:"";position:absolute;z-index:-1;top:0;right:0;width:min(52vw,680px);height:330px;pointer-events:none; background:radial-gradient(circle at 80% 0%,rgba(84,197,232,.09),transparent 62%); } .view>.section-intro{position:relative;padding-top:8px} .view>.section-intro:before{ content:"DDA / FIELD NOTE";display:block;margin-bottom:18px;color:var(--dda-gold-soft); font-size:9px;font-weight:800;letter-spacing:.18em;line-height:1.2; } .view>.section-intro h1{max-width:15ch;font-size:clamp(2.55rem,5.5vw,5rem);line-height:.94} .view>.section-intro>p:last-child{max-width:54ch;line-height:1.7} /* Progression = read-only evidence board, not a stack of generic panels. */ #progress .progress-hero{border:0;background:transparent;gap:12px;overflow:visible} #progress .progress-stat{border:1px solid rgba(255,255,255,.12);border-radius:2px 14px 2px 14px;background:rgba(255,255,255,.035)} #progress .progress-stat.featured{min-height:156px;position:relative;overflow:hidden;display:flex;align-items:center;gap:18px} #progress .progress-stat strong{font-size:clamp(2.4rem,5vw,4.3rem);line-height:.9} /* Real progress ring, replacing what used to be a purely decorative static circle drawn behind the number (:after, no connection to actual data) — the same .progress-ring component already used on the Dashboard photo badge, re-themed here for the dark Deep Navy panel instead of its default light/ivory center. --progress is set in app.js's renderProgressHero(). */ #progress .progress-ring{ flex:none;width:96px;aspect-ratio:1; background:radial-gradient(circle closest-side,#0a1424 76%,transparent 79% 99%),conic-gradient(var(--dda-elite-gold-soft,var(--gold-soft)) calc(var(--progress)*1%),rgba(255,255,255,.1) 0); box-shadow:0 0 0 1px rgba(201,154,69,.22); } #progress .progress-ring strong{font-size:1.3rem;color:#f8fafc;font-family:var(--dda-serif,Georgia,serif)} #progress .progress-stat-ring span{color:var(--dda-elite-gold-soft,var(--gold-soft))} #progress .mastery-panel{border:0;border-top:1px solid var(--dda-rule);border-radius:0;padding-inline:0;background:transparent} #progress .mastery-list{display:grid;gap:10px} #progress .mastery-row{border:1px solid rgba(255,255,255,.1);border-radius:2px 14px 2px 14px;background:rgba(255,255,255,.025);transition:background .22s,border-color .22s,transform .22s} #progress .next-step-panel{border-left:2px solid var(--dda-cyan);border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(84,197,232,.08),transparent 70%)} #progress .progress-next-action{width:auto;margin-top:12px} #membership .premium-local-status{margin:0 0 16px;padding:11px 13px;border-left:2px solid var(--dda-gold);color:#d9e3ed;font-size:.82rem;line-height:1.5;background:rgba(201,154,69,.08)} #membership .membership-preparation-link{display:inline-flex;margin-top:13px;color:#cbd8e6} #progress .modules-track{border:0;border-top:1px solid var(--dda-rule);border-radius:0;background:transparent;padding-inline:0} #progress .certificate-panel{background:linear-gradient(135deg,rgba(201,154,69,.12),rgba(255,255,255,.03) 70%)} /* Parcours = timeline / chapter rail. */ #path .view-photo-band{margin-bottom:clamp(24px,4vw,48px);border-radius:2px 22px 2px 22px;box-shadow:14px 16px 0 rgba(201,154,69,.07)} #path .journey{max-width:980px;margin-inline:auto} #path .journey-current{box-shadow:0 24px 70px rgba(0,0,0,.28),12px 12px 0 rgba(201,154,69,.07)} #path .journey-rail{margin-top:30px;padding-left:38px} #path .journey-rail:before{left:10px;top:18px;bottom:18px;background:linear-gradient(var(--dda-gold),rgba(84,197,232,.18) 45%,var(--line))} #path .journey-dot{left:-33px;width:13px;height:13px;border-width:3px;box-shadow:0 0 0 5px rgba(7,17,31,.9)} #path .journey-node{min-height:74px} #path .journey-node.completed .journey-dot{box-shadow:0 0 0 5px rgba(24,155,146,.12)} #path .journey-node.in_progress .journey-dot,#path .journey-node.available .journey-dot{box-shadow:0 0 0 5px rgba(201,154,69,.13)} /* Journal = interface de données et d'archives, avec densité volontaire. */ #journal .journal-tabs{display:inline-flex;gap:3px;padding:4px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.04);margin-bottom:24px} #journal .journal-tab{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer} #journal .journal-tab.active{background:var(--ivory);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.22)} #journal .journal-panel{border-top:1px solid var(--dda-rule);padding-top:22px} #journal .journal-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px;padding-inline:18px} #journal .journal-count{font-family:var(--dda-serif);font-size:1.5rem;color:#fff;margin:0} #journal .journal-last-entry{font-size:11px;color:var(--muted);margin:3px 0 0} #journal .journal-empty{max-width:700px;padding:64px 30px;border:1px dashed rgba(201,154,69,.35);border-radius:2px 20px 2px 20px;background:linear-gradient(135deg,rgba(201,154,69,.08),rgba(255,255,255,.025));text-align:left} #journal .journal-empty .icon{color:var(--dda-gold-soft);width:28px;height:28px} #journal .journal-empty h2{font-size:clamp(1.7rem,4vw,2.8rem);max-width:12ch;margin-top:18px} #journal .journal-list{border-left:1px solid var(--dda-gold);padding-left:26px} #journal .journal-entry-card{position:relative;border-radius:2px 14px 2px 14px} #journal .journal-entry-card:before{content:"";position:absolute;left:-33px;top:24px;width:11px;height:11px;border:2px solid var(--dda-gold);border-radius:50%;background:var(--navy-950)} #journal .journal-composer{max-width:820px;border-top:1px solid var(--dda-gold);padding-top:24px} #journal .journal-composer .journal-step-label{font-family:var(--dda-serif);font-size:2rem;color:var(--dda-gold-soft)} #journal .journal-toolbar-actions{display:flex;gap:10px;align-items:center} #journal .journal-toolbar-actions .secondary-action{width:auto} #journal .weekly-review-panel{max-width:820px;border-top:2px solid var(--dda-gold);padding-top:24px} #journal .weekly-review-locked{padding:26px;border:1px dashed rgba(201,154,69,.45);background:rgba(201,154,69,.07)} #journal .weekly-review-locked h2,#journal .weekly-review-heading h2{margin:8px 0;color:#f8fafc;font-family:var(--dda-serif);font-size:clamp(1.8rem,4vw,3rem)} #journal .weekly-review-locked p:not(.eyebrow),#journal .weekly-review-window{max-width:680px;color:#cbd5e1;line-height:1.6} #journal .weekly-review-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px} #journal .weekly-review-status{padding:7px 11px;border:1px solid rgba(201,154,69,.45);color:#f1d38c;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} #journal .weekly-review-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0;padding:16px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035)} #journal .weekly-review-evidence div{display:grid;gap:4px} #journal .weekly-review-evidence strong{color:#f8fafc;font-family:var(--dda-serif);font-size:2rem} #journal .weekly-review-evidence span,#journal .weekly-review-evidence p{color:#94a3b8;font-size:13px} #journal .weekly-review-evidence p{grid-column:1/-1;margin:4px 0 0;line-height:1.5} #journal #weekly-review-form{display:grid;gap:15px} #journal #weekly-review-form label{display:grid;gap:7px;color:#cbd5e1;font-size:13px;font-weight:700} #journal #weekly-review-form textarea{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.04);color:#fff;font:inherit;resize:vertical} #journal .weekly-review-actions{display:flex;flex-wrap:wrap;gap:12px} #journal .weekly-review-actions .primary-action,#journal .weekly-review-actions .secondary-action{width:auto} /* Leçon = lecteur pédagogique : respiration narrative et ancrage des portes. */ #lesson .lesson-main,#lesson-m02 .lesson-main,#lesson-m03 .lesson-main,#lesson-m11 .lesson-main,#lesson-m12 .lesson-main,#lesson-m13 .lesson-main{max-width:840px} .lesson-main .lesson-header{max-width:700px} .lesson-main .lesson-header h1{font-size:clamp(2.4rem,5.3vw,5rem);line-height:.94} .lesson-main .lesson-lead{max-width:620px;font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.65} .lesson-main .lesson-loop{margin-top:30px;padding:11px 14px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035)} .lesson-main .lesson-copy{max-width:700px;padding-top:26px;border-top:1px solid var(--dda-rule)} .lesson-main .learning-check,.lesson-main .comparison-block{border-radius:2px 16px 2px 16px;box-shadow:10px 10px 0 rgba(84,197,232,.045)} .lesson-main .result-card{border-radius:2px 20px 2px 20px;background:linear-gradient(135deg,rgba(24,155,146,.15),rgba(255,255,255,.035))} .lesson-main .lesson-actions{backdrop-filter:blur(14px)} /* Market Intelligence = information visualisée par niveaux. */ #markets .market-zone{max-width:1080px;margin-inline:auto} #markets .index-grid{grid-template-columns:1.4fr .8fr;align-items:stretch;border:0;gap:12px;background:transparent;overflow:visible} #markets .index-card{border:1px solid rgba(255,255,255,.12);border-radius:2px 16px 2px 16px;padding:24px;min-height:150px;background:rgba(255,255,255,.035)} #markets .index-card:first-child{min-height:220px;justify-content:end;box-shadow:12px 12px 0 rgba(84,197,232,.05)} #markets .market-brief{border:0;border-top:1px solid var(--dda-gold);border-radius:0;background:transparent;padding-inline:0} #markets .brief-step{grid-template-columns:46px 1fr} #markets .brvm-intro{background:linear-gradient(110deg,rgba(201,154,69,.08),transparent);padding:14px;border-radius:2px 18px 2px 18px} #markets .market-zone-reflect .journal-link-block{border-radius:2px 18px 2px 18px;border-left:2px solid var(--dda-cyan);background:rgba(84,197,232,.06)} /* Profil = identité + statistiques, pas seulement un formulaire. */ #profile .profile-layout{align-items:start} #profile .profile-panel{border:0;border-top:2px solid var(--dda-gold);border-radius:0;background:transparent;padding-inline:0} #profile .preference-panel{border-radius:2px 18px 2px 18px;background:rgba(255,255,255,.035)} #profile .profile-identity{padding:26px 0 28px} #profile .profile-large-avatar{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 7px rgba(201,154,69,.1),12px 12px 0 rgba(201,154,69,.08)} #profile .profile-identity h2{font-family:var(--dda-serif);font-size:clamp(1.8rem,4vw,3rem)} #profile .profile-progress-strip{gap:0;justify-content:space-between} #profile .profile-progress-strip>div{padding-right:20px} #profile .profile-fields input,#profile .profile-fields select{border-radius:2px 10px 2px 10px} /* Bibliothèque = exploration de contenu, avec une étagère ouverte. */ #resources .library-shelf{max-width:980px;margin-inline:auto} #resources .library-shelf-label{padding-left:14px;border-left:2px solid var(--dda-gold)} #resources .library-list{border:0;overflow:visible;background:transparent;display:grid;grid-template-columns:1.18fr .82fr;gap:12px} #resources .library-entry{display:grid;grid-template-columns:1fr;align-content:start;min-height:260px;border:1px solid rgba(255,255,255,.12);border-radius:2px 18px 2px 18px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018));padding:24px} #resources .library-entry+.library-entry{border-top:1px solid rgba(255,255,255,.12)} #resources .library-entry:first-child{min-height:320px;background:linear-gradient(145deg,rgba(84,197,232,.11),rgba(255,255,255,.025))} #resources .library-entry-body h2{font-size:clamp(1.6rem,3vw,2.35rem);margin-top:26px} #resources .resource-feature{max-width:980px;margin:34px auto 0;min-height:220px;display:grid;align-content:center} @media(max-width:699px){ .view>.section-intro:before{margin-bottom:12px} .view>.section-intro h1{font-size:clamp(2.35rem,11vw,3.6rem)} #progress .progress-stat.featured{min-height:128px} #progress .progress-ring{width:72px} #journal .journal-toolbar{align-items:start;flex-direction:column} #journal .journal-toolbar .primary-action{width:100%} #journal .journal-toolbar-actions{width:100%;flex-direction:column} #journal .journal-toolbar-actions .primary-action,#journal .journal-toolbar-actions .secondary-action{width:100%} #journal .journal-empty{padding:42px 22px} #markets .index-grid{grid-template-columns:1fr} #markets .index-card:first-child{min-height:180px} #resources .library-list{grid-template-columns:1fr} #resources .library-entry,#resources .library-entry:first-child{min-height:210px} #profile .profile-progress-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} #profile .profile-progress-strip>div{min-width:0;padding-right:0} } @media(max-width:720px){#journal .weekly-review-heading{display:grid;gap:12px}#journal .weekly-review-status{justify-self:start}#journal .weekly-review-evidence{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ #progress .mastery-row,#resources .library-entry{transition:none} } /* ====================================================================== DDA FINAL ART DIRECTION — sobriété éditoriale La sophistication vient de la hiérarchie, du rythme et de la cohérence, jamais d'une accumulation de cartes, de gradients ou de mouvements. ====================================================================== */ /* Une surface publique plus calme : une seule profondeur, des séparateurs francs et des angles légèrement éditoriaux plutôt que des tuiles SaaS. */ #landing{ background:var(--lp-bg); background-image:none; } #landing h1 em{ background:none; color:var(--lp-blue-2); } #landing .primary-action{ background:var(--lp-blue); box-shadow:0 10px 24px rgba(13,79,176,.24); } #landing .primary-action:hover{ background:var(--lp-blue-2); box-shadow:0 12px 28px rgba(13,79,176,.32); } .landing-aperture{ background:#102942; box-shadow:0 24px 54px rgba(6,16,28,.22); } .landing-institution, .landing-final-cta{ background:var(--lp-card-2); } .landing-institution-photo, .landing-aperture, .landing-method article, .landing-demo-grid article, .landing-problem-list li, .landing-steps-list li, .landing-plan-card, .landing-domain-groups article, .landing-future-grid article{ border-radius:2px 14px 2px 14px; } .landing-method article, .landing-demo-grid article, .landing-problem-list li, .landing-steps-list li, .landing-plan-card, .landing-domain-groups article, .landing-future-grid article{ background:var(--lp-card); } .landing-plan-card-gold{ background:var(--lp-card-2); border-color:rgba(217,164,65,.45); } .landing-signal span{ animation:none; background:var(--gold-soft); opacity:.42; } /* Les micro-interactions restent présentes, mais l'interface ne se met pas en scène : un mouvement bref sur les actions, aucun effet décoratif continu. */ .view.active .panel, .view.active .terminal-mi, .view.active .terminal-two, .view.active .terminal-family, .view.active .terminal-aperture, .view.active .market-zone, .view.active .journey-current{ animation-duration:.28s; } [data-reveal]{ transform:translateY(8px); transition-duration:.35s; } /* Une même grammaire de composants sur les surfaces apprenant : bord net, accent unique, espace généreux. */ .panel, .analysis-terminal, .terminal-lead-photo, .journey-current, .progress-stat, .mastery-row, .next-step-panel, .certificate-panel{ border-radius:2px 14px 2px 14px; } .primary-action, .secondary-action{ border-radius:2px 9px 2px 9px; } @media(max-width:699px){ .landing-editorial-shell{ padding-top:30px; gap:26px; } .landing-aperture{ min-height:390px; padding:22px; } .landing-method article, .landing-demo-grid article, .landing-problem-list li, .landing-steps-list li, .landing-plan-card{ padding:20px; } .landing-trust{ display:grid; gap:10px; } } @media(prefers-reduced-motion:reduce){ [data-reveal]{transition:none} } /* Philosophy beat — une respiration de marque entre le hero et le produit. */ .landing-philosophy{ max-width:1440px; margin:0 auto; padding:clamp(72px,12vw,150px) clamp(20px,8vw,120px); border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); background:var(--lp-bg); } .landing-philosophy>.eyebrow{margin-bottom:24px} .philosophy-line{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,2vw,28px); margin:0; color:var(--lp-heading); font-family:var(--dda-serif); font-size:clamp(2rem,5.2vw,5.6rem); line-height:.98; letter-spacing:-.045em; } .philosophy-line i{ width:clamp(18px,4vw,52px); height:1px; background:var(--gold-soft); opacity:.7; } .philosophy-line strong{color:var(--lp-blue-2);font-weight:500} .philosophy-note{ max-width:480px; margin:28px 0 0 auto; color:var(--lp-body); font-size:.96rem; line-height:1.7; } /* Alternate section rhythm: open ledgers and rails instead of repeating tiles. */ .landing-free{ border-top:1px solid var(--lp-line); background:var(--lp-card-2); } .landing-free-grid{display:grid;gap:0} .landing-free-grid article{ border-top:1px solid var(--lp-line); padding:22px 0; } .landing-free-grid article+article{border-left:0} .landing-free-grid h3{color:var(--lp-heading);margin:4px 0 5px;font-family:var(--dda-serif);font-size:1.45rem} .landing-free-grid p{margin:0;color:var(--lp-body);font-size:.88rem;max-width:32ch} .free-number{color:var(--gold-soft);font-size:.72rem;font-weight:800;letter-spacing:.12em} .landing-inline-cta{margin-top:28px;color:var(--lp-heading)!important} @media(min-width:640px){ .landing-free-grid{grid-template-columns:repeat(4,1fr);column-gap:24px} .landing-free-grid article{min-height:154px} .landing-free-grid article+article{padding-left:24px;border-left:1px solid var(--lp-line)} } @media(max-width:639px){ .landing-philosophy{padding-block:76px} .philosophy-line{display:grid;gap:12px;font-size:clamp(2rem,11vw,3.2rem)} .philosophy-line i{width:34px} .philosophy-note{margin-left:0} } /* Public chrome — header et footer sont des éléments de confiance, pas du HTML laissé au style navigateur. */ .public-header{ position:relative; z-index:5; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; max-width:1440px; margin:0 auto; padding:18px clamp(20px,5vw,72px); border-bottom:1px solid var(--lp-line); color:var(--lp-heading); } .public-header-brand{ display:flex; align-items:center; gap:10px; min-width:190px; text-decoration:none; } .public-header-brand>b, .public-header-brand span+span b{font-size:.84rem;letter-spacing:-.02em} .public-header-brand small{display:block;margin-top:2px;color:var(--lp-body-soft);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase} .public-header-mark{ display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(227,194,127,.65); color:var(--gold-soft); font-family:var(--dda-serif); font-size:1rem; letter-spacing:-.08em; } .public-header-nav{display:flex;justify-content:center;gap:clamp(12px,2vw,28px)} .public-header-nav button, .public-header-actions button, .public-menu summary, .public-menu-panel button, .public-footer-col button{ border:0; background:none; color:inherit; cursor:pointer; } .public-header-nav button{ padding:8px 0; color:var(--lp-body-soft); font-size:.76rem; font-weight:700; white-space:nowrap; } .public-header-nav button:hover, .public-header-nav button.active{color:var(--lp-heading)} .public-header-nav button.active{box-shadow:inset 0 -1px var(--gold-soft)} .public-header-actions{display:flex;align-items:center;gap:14px;white-space:nowrap} .public-login{padding:9px 0;color:var(--lp-body-soft)!important;font-size:.76rem;font-weight:700} .public-start{padding:11px 14px!important;background:var(--lp-blue)!important;color:#fff!important;font-size:.76rem;font-weight:800} .public-start span{margin-left:8px;color:var(--gold-soft)} .public-menu{display:none} .public-footer{ display:grid; grid-template-columns:1.5fr repeat(4,minmax(110px,1fr)); gap:38px 24px; max-width:1440px; margin:0 auto; padding:72px clamp(20px,5vw,72px) 26px; border-top:1px solid var(--lp-line); background:var(--lp-bg); } .public-footer-brand p{margin:18px 0 8px;color:var(--lp-heading);font-family:var(--dda-serif);font-size:1.25rem} .public-footer-brand small{display:block;max-width:28ch;color:var(--lp-body-soft);font-size:.78rem;line-height:1.6} .public-footer-col{display:grid;align-content:start;gap:10px} .public-footer-col strong{margin-bottom:6px;color:var(--gold-soft);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase} .public-footer-col button{padding:0;text-align:left;color:var(--lp-body-soft);font-size:.78rem} .public-footer-col button:hover{color:var(--lp-heading)} .public-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--lp-line);color:var(--lp-body-soft);font-size:.68rem} @media(max-width:1050px){ .public-header{grid-template-columns:auto 1fr auto;gap:16px} .public-header-nav{gap:12px} .public-header-nav button{font-size:.7rem} } @media(max-width:820px){ .public-header{grid-template-columns:1fr auto} .public-header-nav,.public-header-actions{display:none} .public-menu{display:block;justify-self:end} .public-menu summary{list-style:none;color:var(--lp-heading);font-size:.78rem;font-weight:800;cursor:pointer} .public-menu summary::-webkit-details-marker{display:none} .public-menu-panel{position:absolute;right:20px;top:calc(100% + 8px);display:grid;gap:2px;min-width:210px;padding:10px;border:1px solid var(--lp-line);background:var(--lp-card-2);box-shadow:0 14px 32px rgba(0,0,0,.32)} .public-menu-panel button{padding:10px;text-align:left;color:var(--lp-body);font-size:.78rem} .public-menu-panel button:hover{color:var(--lp-heading);background:rgba(255,255,255,.05)} .public-menu-panel .public-menu-cta{margin-top:6px;background:var(--lp-blue);color:#fff} .public-footer{grid-template-columns:repeat(2,1fr);gap:32px 24px} .public-footer-brand{grid-column:1/-1} } @media(max-width:480px){ .public-header{padding-block:14px} .public-header-brand{min-width:0} .public-header-brand span+span b{font-size:.72rem} .public-footer{grid-template-columns:1fr 1fr;padding-top:54px} .public-footer-bottom{display:grid;gap:8px} } /* Conversion beat — confiance avant offre, sans revenir au card grid. */ .landing-differentiation{ display:grid; grid-template-columns:minmax(100px,.28fr) minmax(0,1fr) auto; align-items:end; gap:clamp(24px,5vw,72px); max-width:1440px; margin:0 auto; padding:clamp(54px,8vw,96px) clamp(20px,8vw,120px); border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); background:#0a1423; } .differentiation-mark{align-self:start;color:var(--gold-soft);font-size:.68rem;font-weight:800;letter-spacing:.14em} .differentiation-statement{margin:8px 0 18px;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(2.1rem,5vw,5rem);line-height:.98;letter-spacing:-.04em} .differentiation-statement em{color:var(--lp-blue-2);font-style:normal} .differentiation-note{max-width:48ch;margin:0;color:var(--lp-body);font-size:.94rem;line-height:1.7} .landing-differentiation .landing-inline-cta{align-self:end;white-space:nowrap;color:var(--lp-heading)!important} .landing-mobile-cta{display:none} @media(max-width:820px){ .landing-differentiation{grid-template-columns:1fr;gap:18px} .differentiation-mark{order:-1} .landing-differentiation .landing-inline-cta{justify-self:start} } @media(max-width:639px){ .landing-mobile-cta{ position:fixed; z-index:34; left:12px; right:12px; bottom:calc(12px + var(--safe-b)); display:block; padding:8px; border:1px solid rgba(227,194,127,.35); background:rgba(4,7,15,.92); box-shadow:0 8px 26px rgba(0,0,0,.35); backdrop-filter:blur(14px); } .landing-mobile-cta button{width:100%;min-height:44px;border:0;background:var(--lp-blue);color:#fff;font-weight:800;cursor:pointer} .landing-mobile-cta button span{margin-left:8px;color:var(--gold-soft)} .landing-final-cta{padding-bottom:120px} } /* Le shell public ne doit pas créer de containing block transformé : sinon la barre CTA mobile fixe se positionne par rapport à la landing entière. */ #landing.view.active{animation:dda-public-enter .32s ease both} @keyframes dda-public-enter{from{opacity:0}to{opacity:1}} .landing-institution-photo .photo-scrim{ background:linear-gradient(180deg,rgba(4,7,15,.06),rgba(4,7,15,.48)); } .landing-institution-photo .photo-fill{filter:brightness(1.22) saturate(1.08)} /* Mobile conversion polish — le CTA persistant intervient après le premier temps de lecture, jamais au-dessus du hero dès l'arrivée. */ @media(max-width:639px){ .landing-mobile-cta{display:block;visibility:hidden} body.landing-has-scrolled .landing-mobile-cta{visibility:visible} #landing h1{ font-size:clamp(2.55rem,11.2vw,4rem); letter-spacing:-.05em; } .landing-trust{margin-top:18px} } /* Editorial cleanup — domaines et vision future. Les sujets sont des lignes de lecture, pas des mots collés ni des cartes SaaS. */ .landing-domains{ max-width:1440px; margin:0 auto; padding:clamp(56px,8vw,104px) clamp(20px,8vw,120px); border-top:1px solid var(--lp-line); background:var(--lp-bg); } .landing-domains .landing-section-head{padding:0;max-width:680px} .landing-domains .landing-section-head h2{max-width:18ch;font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.02;letter-spacing:-.035em} .landing-domains .landing-section-head>p:last-child{max-width:52ch;color:var(--lp-body);font-size:.96rem;line-height:1.7} .landing-domain-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px} .landing-domain-groups article{min-width:0;padding:22px 24px;border-top:1px solid var(--lp-line);background:transparent!important} .landing-domain-groups article+article{border-left:1px solid var(--lp-line)} .domain-label{margin:0 0 18px;color:var(--lp-heading);font-family:var(--dda-serif);font-size:1.35rem;line-height:1.15} .landing-domain-groups article>div{display:flex;flex-wrap:wrap;gap:8px} .landing-domain-groups article>div span{display:inline-flex;align-items:center;min-height:30px;padding:6px 9px;border:1px solid rgba(227,194,127,.22);border-radius:2px 8px 2px 8px;color:var(--lp-body);font-size:.75rem;line-height:1.15;white-space:nowrap} .landing-future{ max-width:1440px; margin:0 auto; padding:clamp(60px,9vw,112px) clamp(20px,8vw,120px); border-top:1px solid var(--lp-line); background:var(--lp-card-2); } .landing-future>div:first-child{max-width:760px} .landing-future h2{max-width:15ch;margin:10px 0 20px;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(2.15rem,4.8vw,4.6rem);line-height:.98;letter-spacing:-.04em} .landing-future>div:first-child>p:last-child{max-width:55ch;margin:0;color:var(--lp-body);font-size:.96rem;line-height:1.75} .landing-future-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px} .landing-future-grid article{display:flex;flex-direction:column;align-items:flex-start;min-height:260px;padding:24px;background:var(--lp-card)!important} .landing-future-grid article>span:first-child{color:var(--gold-soft);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .landing-future-grid h3{margin:22px 0 8px;color:var(--lp-heading);font-size:1.55rem;line-height:1.1} .landing-future-grid p{max-width:38ch;margin:0;color:var(--lp-body);font-size:.9rem;line-height:1.65} .landing-future-grid .future-label{margin-top:auto;width:100%;padding:16px 0 0;border-top:1px solid var(--lp-line);color:var(--gold-soft);font-size:.78rem;line-height:1.4} @media(max-width:699px){ .landing-domains,.landing-future{padding-inline:20px} .landing-domains .landing-section-head h2{font-size:clamp(2rem,9vw,2.8rem)} .landing-domain-groups{grid-template-columns:1fr;margin-top:30px} .landing-domain-groups article{padding:22px 0} .landing-domain-groups article+article{border-left:0} .domain-label{margin-bottom:14px;font-size:1.25rem} .landing-domain-groups article>div span{font-size:.78rem} .landing-future h2{font-size:clamp(2.15rem,10vw,3.15rem);line-height:1.02} .landing-future-grid{grid-template-columns:1fr;gap:12px;margin-top:34px} .landing-future-grid article{min-height:220px;padding:22px} } /* Mobile navigation clearance — le bouton de chapitre reste entièrement visible lorsque le Parcours est amené dans le viewport par une action. */ @media(max-width:639px){ .journey-current{scroll-margin-bottom:calc(84px + var(--safe-b))} } /* Access / onboarding — registre institutionnel Deep Navy. La vue doit rester immersive et ne pas basculer vers le canevas ivoire. */ body.access-mode .prototype-banner{ background:#060d17; color:#94a3b8; border-bottom:1px solid rgba(255,255,255,.08); } #access{ background:#060d17; color:#94a3b8; } #access .access-copy>p, #access .access-copy .trust-list, #access .access-card .consent, #access .access-card .form-error, #access .access-card .text-action{color:#94a3b8} #access h1, #access .access-card h2{color:#f8fafc} #access .eyebrow.gold{color:#d9a441} #access .trust-list li{color:#f8fafc} #access .trust-list .icon{color:#6cb8ff} #access .access-card{ background:#0a1424; color:#f8fafc; border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:0 20px 55px rgba(0,0,0,.28); } #access .step-indicator{color:#94a3b8} #access .step-indicator span{border-color:rgba(255,255,255,.2);background:#0a1424;color:#94a3b8} #access .step-indicator span.active{border-color:#f8fafc;background:#f8fafc;color:#060d17} #access .step-indicator i{background:rgba(255,255,255,.16)} #access .access-card label{color:#f8fafc} #access .access-card input, #access .access-card select{ border:1px solid rgba(255,255,255,.14); background:#0a1424; color:#f8fafc; border-radius:10px; } #access .access-card input::placeholder{color:#94a3b8;opacity:1} #access .access-card input:focus, #access .access-card select:focus{border-color:#6cb8ff;box-shadow:0 0 0 3px rgba(108,184,255,.14);outline:0} #access .access-card .consent input{accent-color:#1769d1} #access .access-card .primary-action{ background:#1769d1; color:#fff; border:1px solid transparent; box-shadow:none; } #access .access-card .primary-action:hover, #access .access-card .primary-action:focus-visible{ background:#1d73df; border-color:#d9a441; box-shadow:0 0 0 3px rgba(217,164,65,.14); } #access .access-card .secondary-action{color:#f8fafc;border-color:rgba(255,255,255,.18)} #access .access-card .text-action:hover{color:#f8fafc} #access .access-card #bff-auth-tools{display:flex;gap:16px;align-items:center;margin:-6px 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)} #access .access-card #bff-auth-tools .text-action{min-height:32px;padding:0;color:#94a3b8} #access .access-card #bff-auth-tools .text-action:hover{color:#f8fafc} #access .access-card #bff-auth-status{color:#d9a441} #access .access-card #bff-recovery-form, #access .access-card #bff-verify-panel{padding-top:4px} #access .access-card #bff-recovery-form .text-action{justify-self:start} #access .access-card #bff-verify-panel p:not(.eyebrow){color:#cbd5e1;line-height:1.6} #access .access-illustration{color:#94a3b8;opacity:.8} @media(max-width:639px){ #access .access-card{border-radius:16px} #access .access-copy>p{font-size:.94rem;line-height:1.65} } /* DDA custom select — surface Learning OS, sans menu natif du navigateur. */ #access .dda-select{position:relative;z-index:2} #access .dda-native-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} #access .dda-select-trigger{ width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:#0a1424; color:#94a3b8; font:inherit; text-align:left; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } #access .dda-select-trigger span:first-child.has-value{color:#f8fafc} #access .dda-select-trigger:hover, #access .dda-select.is-open .dda-select-trigger, #access .dda-select-trigger:focus-visible{border-color:#6cb8ff;box-shadow:0 0 0 3px rgba(108,184,255,.14);outline:0} #access .dda-select-trigger[aria-invalid="true"]{border-color:var(--red)} #access .dda-select-chevron{color:#d9a441;font-size:18px;line-height:1;transform:translateY(-2px);transition:transform .18s ease} #access .dda-select.is-open .dda-select-chevron{transform:rotate(180deg) translateY(2px)} #access .dda-select-menu{ position:absolute; left:0; right:0; top:calc(100% + 8px); display:grid; gap:7px; padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:#0a1424; box-shadow:0 20px 55px rgba(0,0,0,.42); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s ease; } #access .dda-select.is-open .dda-select-menu{opacity:1;visibility:visible;transform:none} #access .dda-select-option{ min-height:48px; padding:13px 14px; border:1px solid transparent; border-radius:9px; background:rgba(255,255,255,.025); color:#94a3b8; font:inherit; text-align:left; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; } #access .dda-select-option:hover, #access .dda-select-option:focus-visible, #access .dda-select-option.is-selected{background:rgba(23,105,209,.18);border-color:rgba(108,184,255,.62);color:#f8fafc;outline:0} #access .dda-select-option.is-selected{box-shadow:inset 3px 0 #d9a441} @media(max-width:639px){ #access .dda-select-menu{ position:fixed; z-index:100; left:12px; right:12px; top:auto; bottom:calc(12px + var(--safe-b)); gap:8px; padding:12px; border-radius:18px; transform:translateY(22px); } #access .dda-select.is-open .dda-select-menu{transform:none} #access .dda-select.is-open .dda-select-menu::before{ content:'Choisir une option'; display:block; padding:4px 4px 10px; border-bottom:1px solid rgba(255,255,255,.08); color:#f8fafc; font-family:var(--dda-serif); font-size:1.05rem; } #access .dda-select-option{min-height:52px;padding:15px 14px} } /* Le Bottom Sheet doit être ancré à la fenêtre, jamais au panneau animé. */ #access.view.active{animation:dda-access-enter .32s ease both} @keyframes dda-access-enter{from{opacity:0}to{opacity:1}} @media(max-width:639px){ #access .dda-select-menu{bottom:calc(80px + var(--safe-b));max-height:min(62vh,420px);overflow:auto} } /* Learning OS Q&A — les évaluations deviennent des cartes de décision, pas des listes scolaires. */ .lesson-beat-decision_choice, .lesson-beat-quiz{ border:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 92% 8%,rgba(23,105,209,.16),transparent 34%), linear-gradient(145deg,#0a1424 0%,#07111f 100%); } .lesson-beat-decision_choice h2, .lesson-beat-quiz h2{color:#f8fafc} .lesson-beat-decision_choice>p:not(.eyebrow), .lesson-beat-quiz>p:not(.eyebrow){color:#94a3b8} .decision-choice-options, .answer-grid{gap:12px} .decision-option, .answer-grid button.answer-choice{ display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:14px; min-height:72px; padding:14px 16px 14px 12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); color:#f8fafc; box-shadow:inset 0 1px rgba(255,255,255,.025); transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); } .choice-index{ display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(217,164,65,.38); border-radius:9px; color:#d9a441; font-size:11px; font-weight:800; letter-spacing:.08em; } .choice-text{line-height:1.48} .decision-option:hover, .decision-option:focus-visible, .answer-grid button.answer-choice:hover, .answer-grid button.answer-choice:focus-visible{ transform:translateY(-2px); border-color:rgba(108,184,255,.7); background:rgba(23,105,209,.16); box-shadow:0 10px 24px rgba(4,12,24,.24),inset 3px 0 #d9a441; outline:0; } .decision-option.correct, .answer-grid button.answer-choice.correct{ border-color:rgba(108,184,255,.78); background:rgba(23,105,209,.22); box-shadow:inset 3px 0 #d9a441,0 12px 28px rgba(23,105,209,.12); } .decision-option.incorrect, .answer-grid button.answer-choice.incorrect{ border-color:rgba(217,115,115,.72); background:rgba(122,39,52,.2); box-shadow:inset 3px 0 #d97777; } .feedback:not(:empty){ display:grid; gap:7px; margin-top:18px; padding:16px 18px; border:1px solid rgba(217,164,65,.25); border-left:3px solid #d9a441; border-radius:0 13px 13px 0; background:linear-gradient(135deg,rgba(217,164,65,.10),rgba(23,105,209,.08)); color:#f8fafc; /* Was popping into existence instantly on quiz answer — the one moment a learner most needs a visible, intentional response. Reuses the same dda-pop keyframe as the result card for one consistent motion language. */ animation:dda-pop .4s var(--ease); } .feedback.error:not(:empty){border-left-color:#d97777;border-color:rgba(217,115,115,.28);background:rgba(122,39,52,.13)} .feedback-kicker{color:#d9a441;font-size:11px;letter-spacing:.1em;text-transform:uppercase} .feedback.error .feedback-kicker{color:#f0a4a4} .feedback-copy{color:#cbd5e1;font-size:14px;line-height:1.62;font-weight:500} @media(max-width:639px){ .lesson-beat-decision_choice, .lesson-beat-quiz{border-radius:16px} .decision-option, .answer-grid button.answer-choice{min-height:78px;padding:14px 13px 14px 10px} } /* Future surfaces — remplir les aperçus par des principes vérifiables, sans faire passer une capacité différée pour une fonctionnalité active. */ .future-principles{ margin:34px 0 0; padding:28px 0 0; border-top:1px solid rgba(255,255,255,.09); } .future-principles>h2{ max-width:720px; margin:8px 0 20px; color:#f8fafc; font-family:var(--font-display,Georgia,serif); font-size:clamp(26px,4vw,42px); line-height:1.06; letter-spacing:-.025em; } .future-principles-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .future-principle{ display:flex; gap:13px; min-height:126px; padding:17px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:linear-gradient(145deg,rgba(10,20,36,.92),rgba(7,17,31,.7)); } .future-principle>span{ flex:0 0 auto; color:#d9a441; font-size:11px; font-weight:800; letter-spacing:.08em; } .future-principle strong{display:block;color:#f8fafc;font-size:15px;line-height:1.3} .future-principle p{margin:7px 0 0;color:#94a3b8;font-size:13px;line-height:1.55} .process-grid .future-principle{min-height:112px} .intelligence-boundaries{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .intelligence-boundaries article{ padding:20px; border:1px solid rgba(108,184,255,.22); border-radius:15px; background:rgba(23,105,209,.08); } .intelligence-boundaries article:last-child{ border-color:rgba(217,164,65,.25); background:rgba(217,164,65,.06); } .boundary-label{ display:block; color:#83c8ff; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .boundary-label-muted{color:#d9a441} .intelligence-boundaries p{margin:10px 0 0;color:#cbd5e1;line-height:1.62} @media(max-width:720px){ .future-principles{margin-top:28px;padding-top:24px} .future-principles-grid,.intelligence-boundaries{grid-template-columns:1fr;gap:10px} .future-principle{min-height:auto} } .journal-future-layers{ margin-top:34px; padding:26px 0 8px; border-top:1px solid rgba(255,255,255,.09); } .journal-future-layers h2{ max-width:620px; margin:8px 0 10px; color:#f8fafc; font-family:var(--font-display,Georgia,serif); font-size:clamp(25px,4vw,38px); line-height:1.08; letter-spacing:-.025em; } .journal-future-intro{max-width:700px;color:#94a3b8;line-height:1.65} .journal-future-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px} .journal-future-grid article{padding:17px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(10,20,36,.72)} .journal-future-grid span{display:block;color:#d9a441;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .journal-future-grid strong{display:block;margin-top:12px;color:#f8fafc;line-height:1.35} .journal-future-grid p{margin:8px 0 0;color:#94a3b8;font-size:13px;line-height:1.55} @media(max-width:720px){.journal-future-grid{grid-template-columns:1fr}.journal-future-layers{margin-top:28px;padding-top:22px}} /* Contrast pass — aucune information pédagogique ne doit disparaître dans le Deep Navy, y compris les états verrouillés et les textes d’aide. */ #lesson, #lesson-m02, #lesson-m03, #lesson-m11, #lesson-m12, #lesson-m13{ color:#f8fafc; } #lesson .lesson-main > p, #lesson-m02 .lesson-main > p, #lesson-m03 .lesson-main > p, #lesson-m11 .lesson-main > p, #lesson-m12 .lesson-main > p, #lesson-m13 .lesson-main > p, .lesson-main .lesson-lead, .lesson-main .lesson-copy p, .lesson-main .lesson-beat p, .lesson-main .chart-prompt, .lesson-main .chart-caption, .lesson-main .decision-note, .lesson-main .mini-simulation-stage, .lesson-main .graphical-exercise-canvas, .lesson-outline, .lesson-outline ol, .lesson-outline li{ color:#cbd5e1; } .lesson-main h1, .lesson-main h2, .lesson-main h3, .lesson-main strong, .lesson-main .choice-text, .lesson-main .decision-option, .lesson-main .answer-choice{ color:#f8fafc; } .lesson-loop li, .lesson-loop li.done, .lesson-loop li.now, .lesson-main .time{ color:#cbd5e1; } .lesson-main .learning-check.locked-check, .lesson-main .locked-check{ opacity:1; } .lesson-main .locked-check:after{ color:#cbd5e1; background:rgba(6,13,23,.94); text-shadow:0 1px 8px rgba(0,0,0,.45); } .lesson-main .locked-check h2, .lesson-main .locked-check p, .lesson-main .locked-check .eyebrow{ color:#94a3b8; } .lesson-main .locked-check:after, .lesson-main .lesson-gate-note, .lesson-main [aria-disabled="true"]{ color:#cbd5e1; } .lesson-main .result-card, .lesson-main .result-card > div > p, .lesson-main .result-feedback, .lesson-main .result-stats dt{ color:#cbd5e1; } .lesson-main .result-card h2, .lesson-main .result-card h3, .lesson-main .result-stats dd{ color:#f8fafc; } @media(max-width:639px){ .lesson-main .lesson-lead, .lesson-main .lesson-copy p, .lesson-main .lesson-beat p, .lesson-main .decision-note, .lesson-main .chart-prompt{font-size:15px;line-height:1.65} } /* Competency check — le bloc d’objectif reste dans le registre sombre des leçons ; aucune carte blanche ne doit interrompre la lecture. */ .lesson-main .competency-check-block, .lesson-main .competency-check-block.targets, .lesson-main .competency-check-block.confirms{ background: radial-gradient(circle at 92% 18%,rgba(23,105,209,.16),transparent 42%), linear-gradient(145deg,#0a1424 0%,#07111f 100%); border:1px solid rgba(255,255,255,.08); color:#94a3b8; box-shadow:inset 3px 0 #d4af37,0 10px 25px rgba(0,0,0,.16); } .lesson-main .competency-check-block strong{color:#f8fafc} .lesson-main .competency-check-block .icon{color:#d4af37} .lesson-main .competency-check-block p{color:#94a3b8} /* Lesson result actions — les liens de sortie doivent rester lisibles sur la surface sombre, y compris après une validation complète. */ .lesson-main .result-action, .lesson-main .result-action:visited{ color:#cbd5e1; border-color:rgba(255,255,255,.16); } .lesson-main .result-action:hover, .lesson-main .result-action:focus-visible{ color:#f8fafc; border-color:#d4af37; background:rgba(23,105,209,.16); } .lesson-main .result-card .result-label, .lesson-main .result-card .result-status, .lesson-main .result-card .status-label{ color:#8ee0ce; } /* Mobile viewport repair — a continuous full-bleed learning surface, not a floating white sheet. */ body.public-shell{background:#060d17;color:var(--lp-heading)} body.public-shell .app-shell, body.public-shell main{min-height:100vh;background:#060d17} #landing{ --lp-bg:#060d17; background-color:#060d17; } #landing.view.active{width:100%;max-width:none;margin:0;transform:none} @media(max-width:639px){ #landing{min-height:100svh;padding-bottom:calc(144px + var(--safe-b))} .landing-free{padding-bottom:20px} .landing-free-grid{gap:12px;padding:8px 16px 12px} .landing-free-grid article{ min-width:0; padding:18px 16px; border:1px solid var(--lp-line); border-radius:2px 12px 2px 12px; background:var(--lp-card); } .landing-free-grid article+article{border-left:1px solid var(--lp-line)} .landing-free-grid .free-number{display:block;margin-bottom:7px} .landing-free-grid p{max-width:none} body.landing-cta-covering-content .landing-mobile-cta{visibility:hidden;pointer-events:none} } /* DDA PREMIUM VISUAL FINISH — rhythm, product proof, mobile-first */ #landing .landing-section-head{padding-inline:0} #landing .landing-section-head h2{max-width:22ch} #landing .landing-section-head>p:last-child{max-width:58ch;color:var(--lp-body);line-height:1.6} #landing .landing-philosophy-band{max-width:1200px;margin:0 auto;padding:clamp(64px,10vw,132px) clamp(20px,5vw,72px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:end;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)} #landing .philosophy-band-copy{max-width:680px} #landing .differentiation-statement{font-family:var(--dda-serif);font-size:clamp(2.35rem,6vw,5.4rem);line-height:.98;letter-spacing:-.045em;color:var(--lp-heading)} #landing .differentiation-statement em{color:var(--dda-gold-soft);font-style:normal} #landing .philosophy-band-copy .differentiation-note{max-width:48ch;margin-top:22px;color:var(--lp-body);font-size:1rem;line-height:1.65} #landing .landing-philosophy-band .landing-inline-cta{white-space:nowrap;margin-bottom:4px} #landing .landing-experience,#landing .landing-product,#landing .landing-proof,#landing .landing-ecosystem{max-width:1200px;margin:0 auto;padding:clamp(72px,10vw,132px) clamp(20px,5vw,72px);border-bottom:1px solid var(--lp-line)} #landing .experience-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);column-gap:64px;align-items:end} #landing .experience-heading .eyebrow{grid-column:1/-1} #landing .experience-heading h2{grid-column:1} #landing .experience-heading>p:last-child{grid-column:2;grid-row:2} #landing .experience-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:58px 0 0;padding:0;list-style:none} #landing .experience-flow::before{content:"";position:absolute;left:7%;right:7%;top:28px;height:1px;background:linear-gradient(90deg,var(--lp-blue-2),rgba(201,154,69,.2),var(--lp-blue-2));opacity:.6} #landing .experience-flow li{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;min-width:0;padding:0 14px 0 0;background:none;border:0;border-radius:0;transition:opacity .28s ease,transform .28s ease} #landing .experience-flow li:not(.is-active){opacity:.52} #landing .experience-flow li.is-active{opacity:1;transform:translateY(-6px)} #landing .experience-flow .method-index{display:grid;place-items:center;width:56px;height:56px;margin:0;border:1px solid var(--lp-line);border-radius:50%;background:var(--lp-bg);color:var(--dda-gold-soft);font-size:1rem;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease} #landing .experience-flow li.is-active .method-index{border-color:var(--dda-gold);background:var(--lp-card-2);box-shadow:0 0 0 8px rgba(201,154,69,.08)} #landing .experience-flow h3{color:var(--lp-heading);font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase} #landing .experience-flow p{max-width:18ch;color:var(--lp-body);font-size:.84rem;line-height:1.5} #landing .experience-status{display:flex;align-items:center;gap:10px;margin:30px 0 0;color:var(--dda-gold-soft);font-size:.84rem;letter-spacing:.04em} #landing .experience-status-dot{width:8px;height:8px;border-radius:50%;background:var(--dda-gold);box-shadow:0 0 0 5px rgba(201,154,69,.1)} #landing .landing-product{background:linear-gradient(180deg,rgba(13,30,52,.28),transparent)} #landing .product-composition{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:42px;align-items:end;margin-top:48px} #landing .product-window{overflow:hidden;border:1px solid rgba(227,194,127,.32);border-radius:4px;background:#091321;box-shadow:0 24px 70px rgba(0,0,0,.28)} #landing .product-window-bar{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--lp-line);font-size:.66rem;letter-spacing:.1em;color:var(--lp-body-soft)} #landing .window-state{color:var(--dda-gold-soft)} #landing .window-state i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#8ee0ce} #landing .product-window-body{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;padding:24px} #landing .product-window-lead{grid-row:span 2;padding:4px 0 4px 4px} #landing .product-window-lead h3{max-width:12ch;margin:10px 0 8px;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(1.8rem,4vw,3.3rem);line-height:.98} #landing .product-window-lead p{color:var(--lp-body);font-size:.8rem} #landing .product-window-action{margin-top:28px;border:0;border-bottom:1px solid var(--dda-gold);padding:8px 0;background:transparent;color:var(--lp-heading);font:inherit;font-weight:700;cursor:pointer} #landing .product-window-action span{color:var(--dda-gold-soft);padding-left:10px} #landing .product-window-rail,#landing .product-window-evidence{padding:18px;border:1px solid var(--lp-line);background:rgba(255,255,255,.025)} #landing .rail-label{display:flex;justify-content:space-between;gap:12px;color:var(--lp-body);font-size:.75rem} #landing .rail-label strong{color:var(--dda-gold-soft)} #landing .mastery-line{display:flex;gap:6px;margin:24px 0 12px} #landing .mastery-line i{height:7px;flex:1;background:rgba(255,255,255,.12);border-radius:99px} #landing .mastery-line i.done{background:var(--lp-blue-2)} #landing .mastery-line i.active{background:var(--dda-gold)} #landing .rail-caption,#landing .product-window-evidence small{color:var(--lp-body-soft);font-size:.7rem} #landing .product-window-evidence{display:grid;gap:6px} #landing .product-window-evidence strong{color:#8ee0ce;font-size:.95rem} #landing .product-caption{padding-bottom:8px} #landing .product-caption-index{display:block;margin-bottom:18px;color:var(--dda-gold-soft);font-size:.68rem;letter-spacing:.14em;font-weight:800} #landing .product-caption p{color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(1.3rem,2.5vw,2.2rem);line-height:1.05} #landing .product-caption .product-caption-note{margin-top:18px;color:var(--lp-body-soft);font-family:var(--dda-sans);font-size:.82rem;line-height:1.55} #landing .product-index{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;padding:0;border-top:1px solid var(--lp-line)} #landing .product-index article{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:18px 18px 0 0;background:transparent;border:0;border-radius:0} #landing .product-index article+article{border-left:1px solid var(--lp-line);padding-left:18px} #landing .product-index-number{grid-row:span 2;color:var(--dda-gold-soft);font-size:.72rem;font-weight:800;letter-spacing:.08em} #landing .product-index h3{color:var(--lp-heading);font-size:.95rem} #landing .product-index p{color:var(--lp-body-soft);font-size:.78rem;line-height:1.5} #landing .landing-proof{background:#0b1628} #landing .proof-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:48px} #landing .proof-practice-demo,#landing .proof-measure{min-height:290px;padding:28px;border:1px solid var(--lp-line);background:#091321} #landing .proof-practice-demo{display:flex;flex-direction:column;justify-content:space-between} #landing .proof-demo-head{display:flex;justify-content:space-between;gap:12px} #landing .proof-demo-state{color:var(--dda-gold-soft);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase} #landing .proof-practice-demo h3{max-width:18ch;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(1.6rem,3vw,2.6rem);line-height:1} #landing .proof-choice-list{display:grid;gap:8px} #landing .proof-choice-list button{min-height:48px;padding:12px 14px;border:1px solid var(--lp-line);background:rgba(255,255,255,.035);color:var(--lp-body);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease} #landing .proof-choice-list button:hover,#landing .proof-choice-list button:focus-visible{border-color:var(--dda-gold);background:rgba(201,154,69,.1);transform:translateX(4px)} #landing .proof-practice-demo.is-confirmed .proof-demo-state{color:#8ee0ce} #landing .proof-practice-demo.is-review .proof-demo-state{color:#ffbe8f} #landing .proof-feedback{min-height:2.8em;color:var(--lp-body-soft);font-size:.8rem;line-height:1.5} #landing .proof-measure{display:flex;align-items:center;gap:26px;background:linear-gradient(135deg,#102843,#0b1628)} #landing .proof-ring{display:grid;place-items:center;flex:none;width:150px;height:150px;border:1px solid var(--dda-gold);border-radius:50%;box-shadow:inset 0 0 0 12px rgba(201,154,69,.07),0 0 0 10px rgba(201,154,69,.04);color:var(--lp-heading)} #landing .proof-ring span{font-family:var(--dda-serif);font-size:3.5rem;line-height:.8} #landing .proof-ring small{color:var(--dda-gold-soft);font-size:.68rem;letter-spacing:.08em} #landing .proof-measure h3{margin:10px 0;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(1.35rem,2.6vw,2.2rem);line-height:1.05} #landing .proof-measure p{color:var(--lp-body);font-size:.86rem;line-height:1.6} #landing .proof-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:38px 0 0;padding:0} #landing .proof-principles li{display:flex;gap:12px;padding:16px 16px 0 0;background:transparent;border:0;border-top:1px solid var(--lp-line);border-radius:0} #landing .proof-principles li+li{padding-left:16px;border-left:1px solid var(--lp-line)} #landing .proof-principles .icon{flex:none;color:var(--dda-gold-soft)} #landing .proof-principles strong{display:block;margin-bottom:5px;color:var(--lp-heading);font-size:.84rem} #landing .proof-principles p{color:var(--lp-body-soft);font-size:.75rem;line-height:1.5} #landing .landing-free{max-width:1200px;margin:0 auto;padding:clamp(72px,10vw,132px) clamp(20px,5vw,72px);border-bottom:1px solid var(--lp-line)} #landing .value-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:48px 0 24px;padding:0;border-top:1px solid var(--lp-line)} #landing .value-rail article{padding:20px 18px 12px 0;background:transparent;border:0;border-radius:0} #landing .value-rail article+article{padding-left:18px;border-left:1px solid var(--lp-line)} #landing .value-rail .free-number{color:var(--dda-gold-soft);font-size:.72rem;letter-spacing:.1em} #landing .value-rail h3{margin:12px 0 7px;color:var(--lp-heading);font-size:1rem} #landing .value-rail p{color:var(--lp-body-soft);font-size:.78rem;line-height:1.5} #landing .landing-free>.landing-inline-cta{display:inline-flex;margin:4px 0 56px} #landing .plan-rail{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0;padding:0;border:0} #landing .plan-rail .landing-plan-card{border-radius:0;padding:22px;background:transparent;border:1px solid var(--lp-line)} #landing .plan-rail .landing-plan-card-gold{border-color:rgba(201,154,69,.42);background:rgba(201,154,69,.05)} #landing .plan-rail .landing-plan-card h3{font-family:var(--dda-serif);font-size:1.7rem} #landing .landing-ecosystem{display:grid;grid-template-columns:1fr .8fr;grid-template-areas:"copy photo" "domains domains";gap:46px;background:linear-gradient(165deg,#0f1c30,#07111f)} #landing .ecosystem-copy{grid-area:copy;align-self:end} #landing .ecosystem-copy h2{max-width:17ch;margin:12px 0;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(2rem,4.4vw,4rem);line-height:1} #landing .ecosystem-copy>p:not(.eyebrow){max-width:48ch;color:var(--lp-body);line-height:1.6} #landing .ecosystem-copy .institution-proof{margin-top:30px} #landing .ecosystem-photo{grid-area:photo;position:relative;min-height:420px;overflow:hidden;border:1px solid var(--lp-line)} #landing .photo-caption{position:absolute;right:20px;bottom:20px;max-width:18ch;color:#fff;font-family:var(--dda-serif);font-size:1.5rem;line-height:1} #landing .domain-rail{grid-area:domains;padding:24px 0 0;border-top:1px solid var(--lp-line)} #landing .domain-rail .landing-section-head{padding:0} #landing .domain-rail .landing-section-head h3{max-width:22ch;margin:8px 0 24px;color:var(--lp-heading);font-family:var(--dda-serif);font-size:clamp(1.4rem,2.4vw,2.2rem)} #landing .domain-rail .landing-domain-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:0} #landing .domain-rail .landing-domain-groups article{padding:0 18px 0 0;border:0;border-top:1px solid var(--lp-line);border-radius:0;background:transparent} #landing .domain-rail .landing-domain-groups article+article{padding-left:18px;border-left:1px solid var(--lp-line)} #landing .domain-rail .domain-label{margin:16px 0 10px;color:var(--dda-gold-soft);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase} #landing .domain-rail .landing-domain-groups article div{display:flex;flex-wrap:wrap;gap:6px 12px} #landing .domain-rail .landing-domain-groups span{color:var(--lp-body);font-size:.78rem} #landing .future-editorial-grid{gap:0} #landing .future-editorial-grid article{border-radius:0;background:transparent;border:0;border-top:1px solid var(--lp-line);padding:22px 0} #landing .future-editorial-grid article+article{border-left:1px solid var(--lp-line);padding-left:24px} #landing .future-editorial-grid article>span{color:var(--dda-gold-soft);font-size:.7rem;letter-spacing:.1em} #landing .future-editorial-grid h3{font-family:var(--dda-serif);font-size:2rem} #landing .future-editorial-grid p{max-width:34ch;color:var(--lp-body);line-height:1.55} #landing .public-footer-brand .footer-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;color:var(--dda-gold-soft);font-size:.62rem;letter-spacing:.1em} @media (max-width:899px){ #landing .landing-philosophy-band{grid-template-columns:1fr;gap:18px} #landing .landing-philosophy-band .landing-inline-cta{justify-self:start} #landing .experience-heading{display:block} #landing .experience-heading>p:last-child{margin-top:16px} #landing .experience-flow{grid-template-columns:1fr;gap:0;margin-top:38px} #landing .experience-flow::before{left:28px;right:auto;top:28px;bottom:28px;width:1px;height:auto;background:linear-gradient(180deg,var(--lp-blue-2),rgba(201,154,69,.2),var(--lp-blue-2))} #landing .experience-flow li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:0 0 26px} #landing .experience-flow p{max-width:30ch} #landing .product-composition,#landing .proof-composition{grid-template-columns:1fr;gap:24px} #landing .product-window-body{grid-template-columns:1fr} #landing .product-window-lead{grid-row:auto} #landing .product-index,#landing .proof-principles,#landing .value-rail{grid-template-columns:1fr 1fr} #landing .product-index article:nth-child(odd),#landing .value-rail article:nth-child(odd),#landing .proof-principles li:nth-child(odd){padding-left:0;border-left:0} #landing .product-index article:nth-child(n+3),#landing .value-rail article:nth-child(n+3),#landing .proof-principles li:nth-child(n+3){border-top:1px solid var(--lp-line);padding-top:18px} #landing .proof-measure{align-items:flex-start;flex-direction:column} #landing .plan-rail{grid-template-columns:1fr} #landing .landing-ecosystem{grid-template-columns:1fr;grid-template-areas:"copy" "photo" "domains";gap:32px} #landing .ecosystem-photo{min-height:300px} #landing .domain-rail .landing-domain-groups{grid-template-columns:1fr} #landing .domain-rail .landing-domain-groups article+article{padding-left:0;border-left:0} #landing .domain-rail .landing-domain-groups article{padding:14px 0;border-top:1px solid var(--lp-line)} #landing .future-editorial-grid article+article{padding-left:0;border-left:0} } @media (max-width:420px){ #landing .landing-philosophy-band,#landing .landing-experience,#landing .landing-product,#landing .landing-proof,#landing .landing-free,#landing .landing-ecosystem{padding-inline:18px} #landing .product-window-body{padding:18px} #landing .product-index,#landing .value-rail,#landing .proof-principles{grid-template-columns:1fr} #landing .product-index article+article,#landing .value-rail article+article,#landing .proof-principles li+li{padding-left:0;border-left:0;border-top:1px solid var(--lp-line);padding-top:16px} #landing .proof-ring{width:120px;height:120px} } @media(prefers-reduced-motion:reduce){#landing .experience-flow li,#landing .proof-choice-list button{transition:none}} @media(max-width:899px){ #landing .value-rail{row-gap:12px} } @media(max-width:899px){ #landing .landing-experience,#landing .landing-product,#landing .landing-proof,#landing .landing-ecosystem,#landing .landing-free{padding-block:52px} #landing .product-composition,#landing .proof-composition{margin-top:30px} #landing .product-index{margin-top:30px} #landing .product-window-body{padding:18px;gap:12px} #landing .product-window-lead h3{font-size:2.25rem} #landing .proof-practice-demo,#landing .proof-measure{min-height:240px;padding:22px} #landing .proof-practice-demo h3{font-size:2rem} #landing .proof-principles{margin-top:24px} #landing .value-rail{margin-top:30px} #landing .landing-free>.landing-inline-cta{margin-bottom:32px} #landing .plan-rail .landing-plan-card{padding:18px} #landing .landing-ecosystem{gap:24px} #landing .ecosystem-photo{min-height:240px} #landing .domain-rail{padding-top:18px} } /* DDA 3D SIGNATURE — lightweight CSS orbit, no WebGL dependency. */ #landing .landing-aperture{position:relative;isolation:isolate;perspective:1100px} #landing .landing-3d-scene{position:absolute;z-index:1;top:50%;right:9%;width:min(58%,390px);aspect-ratio:1;transform:translateY(-50%) rotateX(8deg) rotateY(-13deg);transform-style:preserve-3d;pointer-events:none;opacity:.88} #landing .landing-3d-orbit{position:absolute;inset:10%;border:1px solid rgba(226,190,112,.44);border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 30px rgba(42,116,214,.08),inset 0 0 28px rgba(201,154,69,.06);animation:dda-orbit-spin 18s linear infinite} #landing .landing-3d-orbit::before,#landing .landing-3d-orbit::after{content:"";position:absolute;inset:12%;border:1px solid rgba(93,167,238,.17);border-radius:50%;transform:rotateX(70deg);} #landing .landing-3d-orbit::after{transform:rotateY(70deg)} #landing .landing-3d-orbit i{position:absolute;top:50%;left:-5px;width:10px;height:10px;border-radius:50%;background:#e3bd73;box-shadow:0 0 0 5px rgba(227,189,115,.1),0 0 24px rgba(227,189,115,.9);transform:translateY(-50%)} #landing .landing-3d-orbit-middle{inset:20%;border-color:rgba(94,169,237,.52);animation-duration:13s;animation-direction:reverse;transform:rotateZ(38deg) rotateX(62deg)} #landing .landing-3d-orbit-middle i{left:auto;right:-5px;background:#71b6ee;box-shadow:0 0 0 5px rgba(113,182,238,.1),0 0 24px rgba(113,182,238,.85)} #landing .landing-3d-orbit-inner{inset:31%;border-color:rgba(238,226,197,.42);animation-duration:9s;transform:rotateY(64deg) rotateZ(-32deg)} #landing .landing-3d-orbit-inner i{top:auto;bottom:-5px;left:50%;transform:translateX(-50%);width:8px;height:8px} #landing .landing-3d-core{position:absolute;z-index:2;top:50%;left:50%;display:grid;place-items:center;width:112px;height:112px;border:1px solid rgba(239,216,165,.72);border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(225,190,112,.34),rgba(7,18,33,.94) 62%);box-shadow:0 0 0 12px rgba(201,154,69,.05),0 18px 55px rgba(0,0,0,.36),inset 0 0 28px rgba(255,255,255,.08);transform:translate(-50%,-50%) translateZ(38px);animation:dda-core-breathe 4.8s ease-in-out infinite} #landing .landing-3d-core span{color:#f8f1df;font-family:var(--dda-serif);font-size:1.72rem;letter-spacing:.08em;line-height:1} #landing .landing-3d-core small{margin-top:-20px;color:var(--dda-gold-soft);font-size:.48rem;letter-spacing:.18em} #landing .landing-3d-node{position:absolute;z-index:3;padding:5px 7px;border:1px solid rgba(226,190,112,.4);background:rgba(5,13,24,.68);color:rgba(248,241,223,.86);font-size:.48rem;letter-spacing:.16em;line-height:1;backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(0,0,0,.2);animation:dda-node-float 5s ease-in-out infinite} #landing .landing-3d-node-one{top:7%;left:18%} #landing .landing-3d-node-two{right:1%;bottom:21%;animation-delay:-1.8s} #landing .landing-3d-node-three{left:8%;bottom:8%;animation-delay:-3.2s} #landing .landing-aperture-top,#landing .landing-aperture-copy,#landing .landing-signal,#landing .aperture-thread{position:relative;z-index:4} @keyframes dda-orbit-spin{from{transform:rotateZ(0deg) rotateX(64deg)}to{transform:rotateZ(360deg) rotateX(64deg)}} @keyframes dda-core-breathe{0%,100%{filter:brightness(.94);transform:translate(-50%,-50%) translateZ(38px) scale(1)}50%{filter:brightness(1.14);transform:translate(-50%,-50%) translateZ(52px) scale(1.035)}} @keyframes dda-node-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,10px)}} @media(max-width:899px){ #landing .landing-3d-scene{right:5%;width:min(64%,320px);opacity:.76;transform:translateY(-47%) rotateX(7deg) rotateY(-10deg) scale(.9)} #landing .landing-3d-core{width:92px;height:92px} #landing .landing-3d-core span{font-size:1.38rem} } @media(max-width:639px){ #landing .landing-3d-scene{top:43%;right:4%;width:72%;opacity:.58;transform:translateY(-50%) rotateX(6deg) rotateY(-8deg) scale(.78)} #landing .landing-3d-node{font-size:.42rem} #landing .landing-aperture-copy{max-width:78%;} } body.low-data #landing .landing-3d-scene{display:none} @media(prefers-reduced-motion:reduce){ #landing .landing-3d-orbit,#landing .landing-3d-core,#landing .landing-3d-node{animation:none!important} #landing .landing-3d-orbit{transform:rotateX(64deg)} } /* DDA PROOF HALO — subtle 3D depth tied only to real mastery evidence. */ #progress .mastery-row-focused .mastery-level{position:relative;isolation:isolate;transform-style:preserve-3d} #progress .mastery-row-focused[data-proof-state="practiced"] .mastery-level::before, #progress .mastery-row-focused[data-proof-state="confirmed"] .mastery-level::before{content:"";position:absolute;z-index:-1;inset:-10px -16px;border:1px solid rgba(201,154,69,.24);border-radius:50%;transform:rotateX(62deg) rotateY(-16deg);box-shadow:0 0 18px rgba(201,154,69,.08);pointer-events:none;animation:dda-proof-orbit 8s linear infinite} #progress .mastery-row-focused[data-proof-state="confirmed"] .mastery-level::before{border-color:rgba(142,224,206,.34);box-shadow:0 0 22px rgba(142,224,206,.1);animation-duration:6s} #progress .mastery-row-focused[data-proof-state="confirmed"] .mastery-level::after{content:"";position:absolute;z-index:-1;inset:-5px -8px;border:1px dashed rgba(142,224,206,.2);border-radius:50%;transform:rotateY(66deg);pointer-events:none;animation:dda-proof-breathe 3.8s ease-in-out infinite} @keyframes dda-proof-orbit{from{transform:rotateX(62deg) rotateY(-16deg) rotateZ(0deg)}to{transform:rotateX(62deg) rotateY(-16deg) rotateZ(360deg)}} @keyframes dda-proof-breathe{0%,100%{opacity:.45;transform:rotateY(66deg) scale(.96)}50%{opacity:1;transform:rotateY(66deg) scale(1.04)}} @media(max-width:639px){ #progress .mastery-row-focused[data-proof-state="practiced"] .mastery-level::before, #progress .mastery-row-focused[data-proof-state="confirmed"] .mastery-level::before{inset:-8px -10px} } body.low-data #progress .mastery-level::before,body.low-data #progress .mastery-level::after{display:none} @media(prefers-reduced-motion:reduce){ #progress .mastery-row-focused .mastery-level::before,#progress .mastery-row-focused .mastery-level::after{animation:none!important} } /* PROGRESSION CARDS — remove the flat grey and restore the DDA Deep Navy surface. */ #progress .mastery-row-focused .proof-timeline li{ background: radial-gradient(circle at 92% 8%,rgba(84,197,232,.07),transparent 42%), linear-gradient(135deg,rgba(10,20,36,.98),rgba(7,17,31,.98)); border:1px solid rgba(255,255,255,.08); color:#f8fafc; box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 18px rgba(0,0,0,.12); } #progress .mastery-row-focused .proof-timeline li.done{border-color:rgba(201,154,69,.24)} #progress .mastery-row-focused .proof-timeline li.pending{border-color:rgba(255,255,255,.08)} #progress .mastery-row-focused .proof-timeline li strong{color:#f8fafc;font-weight:800} #progress .mastery-row-focused .proof-timeline li small{color:#94a3b8;font-size:.78rem;line-height:1.3} #progress .mastery-row-focused .proof-timeline li .proof-dot{color:#94a3b8} #progress .mastery-row-focused .proof-timeline li.done .proof-dot{color:#8ee0ce} @media(max-width:699px){ #progress .mastery-row-focused .proof-timeline li{background:linear-gradient(135deg,rgba(10,20,36,.98),rgba(7,17,31,.98))} } /* MOBILE LANDING FINISH — future labels and safe scroll clearance. */ #landing .future-label, #landing .future-label-link, #landing .future-label-tag{ border:1px solid rgba(201,154,69,.34); border-radius:2px 10px 2px 10px; background:linear-gradient(135deg,rgba(10,20,36,.96),rgba(7,17,31,.9)); color:#94a3b8; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } #landing .future-label span, #landing .future-label-link .icon{color:var(--dda-gold-soft)} #landing .future-label:hover, #landing .future-label:focus-visible, #landing .future-label-link:hover, #landing .future-label-link:focus-visible{border-color:rgba(201,154,69,.62);color:#f8fafc;background:rgba(10,20,36,.98)} /* .future-label-tag: these three DDA Experts/Communauté/AI cards used to be — a link to the very section already on screen, with a label implying a dedicated destination that doesn't exist yet (flagged by the 2026-10-24 external audit). They are plain, non-interactive status tags now (no cursor:pointer, no focus ring) — unlike .future-label-link above, which stays a real button elsewhere (academy.html's Community preview) and keeps its clickable affordance. */ #landing .future-label-tag{display:inline-block;padding:10px 14px;font:inherit;width:auto} @media(max-width:639px){ #landing{padding-bottom:calc(220px + var(--safe-b));scroll-padding-bottom:220px} #landing .landing-future-grid .future-label{padding:13px 12px;margin-top:18px} #landing .landing-final-cta{padding-bottom:160px} #landing .public-footer{padding-bottom:28px} } /* MOBILE GRID REPAIR — one gutter for every primary container. */ @media(max-width:639px){ .view:not(#landing){ box-sizing:border-box; width:100%; max-width:none; padding-left:16px; padding-right:16px; } .view:not(#landing) .panel, .view:not(#landing) .mastery-row, .view:not(#landing) .journal-panel, .view:not(#landing) .journal-empty, .view:not(#landing) .market-zone, .view:not(#landing) .index-grid, .view:not(#landing) .library-list, .view:not(#landing) .membership-panel, .view:not(#landing) .profile-panel, .view:not(#landing) .support-layout, .view:not(#landing) .community-featured-card{ margin-left:0; margin-right:0; box-sizing:border-box; } #landing .landing-editorial-shell, #landing .landing-philosophy-band, #landing .landing-experience, #landing .landing-product, #landing .landing-proof, #landing .landing-free, #landing .landing-ecosystem, #landing .landing-domains, #landing .landing-future, #landing .landing-differentiation, #landing .landing-final-cta, #landing .public-footer{ box-sizing:border-box; padding-left:16px; padding-right:16px; } #landing{padding-bottom:calc(240px + var(--safe-b));scroll-padding-bottom:240px} #landing .landing-final-cta{padding-bottom:180px} } /* PREMIUM P2 — local vertical slice, keeping Learning editorial + Terminal precision. */ .premium-track-status{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 28px;padding:16px 18px;border:1px solid rgba(203,163,74,.3);background:#0a1424;color:#f8fafc} .premium-track-status strong{letter-spacing:.06em;font-size:.72rem;color:#d8b66a}.premium-track-status small{color:#94a3b8;margin-left:auto} .premium-progress-strip{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 28px;padding:0;border:1px solid rgba(10,20,36,.14);background:#fff} .premium-progress-strip li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:10px;min-height:88px;padding:16px 14px;background:linear-gradient(135deg,#fff,#f7f4eb);border-right:1px solid rgba(10,20,36,.1)} .premium-progress-strip li:last-child{border-right:0}.premium-progress-strip li:not(:last-child)::after{content:"";position:absolute;top:29px;right:-1px;width:12px;height:1px;background:rgba(167,123,34,.35);z-index:1} .premium-progress-index{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(10,20,36,.18);border-radius:50%;font:700 .7rem ui-monospace,monospace;color:#64748b;background:#fff} .premium-progress-strip strong{display:block;color:#0a1424;font-size:.82rem;line-height:1.2}.premium-progress-strip small{display:block;margin-top:7px;color:#64748b;font-size:.74rem;line-height:1.2} .premium-progress-strip li[data-state="active"]{background:linear-gradient(135deg,#fffaf0,#f8f2df);box-shadow:inset 0 -3px 0 #cba34a}.premium-progress-strip li[data-state="active"] .premium-progress-index{border-color:#cba34a;color:#8b6418;background:#fff8e8} .premium-progress-strip li[data-state="complete"]{background:linear-gradient(135deg,#f2fbf8,#eaf6f1);box-shadow:inset 0 -3px 0 #4e9f8c}.premium-progress-strip li[data-state="complete"] .premium-progress-index{border-color:#4e9f8c;color:#267866;background:#e8f7f2}.premium-progress-strip li[data-state="complete"] small{color:#267866;font-weight:700} .premium-progress-strip li[data-state="locked"]{opacity:.72}.premium-progress-strip li[data-state="locked"] .premium-progress-index{background:#f5f5f2} .premium-module-rail{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}.premium-module-rail li{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:16px;padding:18px 0;border-top:1px solid rgba(10,20,36,.12);transition:background-color .15s ease}.premium-module-rail li>span{font-family:ui-monospace,monospace;color:#a77b22;font-size:.8rem}.premium-module-rail strong{display:block;color:#0a1424}.premium-module-rail small{display:block;color:#64748b;margin-top:4px}.premium-module-rail .secondary-action{min-height:44px} /* Each row is a real destination (its "Ouvrir" button), so a light hover on the whole row is an honest affordance, not decoration without function. */ .premium-module-rail li:hover{background-color:rgba(10,20,36,.03)} #lab .premium-module-rail li:hover{background-color:rgba(255,255,255,.025)} /* small's #64748b was calibrated for the light Premium Track card — on the Lab's dark background that's ~4.1:1 contrast, under WCAG AA's 4.5:1 for body text. #premium-track already gets this exact fix (see the #premium-track .premium-module-rail small rule below); #lab never did. */ #lab .premium-module-rail small{color:#b8c6d5} .lesson-layout-premium .lesson-main{max-width:820px}.premium-handoff{margin-top:28px}.premium-handoff h3{margin:8px 0}.premium-view .section-intro{max-width:820px}.lab-brief{background:#0a1424;color:#f8fafc;border-color:rgba(255,255,255,.08)}.lab-brief h2{color:#f8fafc}.lab-brief p,.lab-brief dd{color:#cbd5e1}.lab-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.lab-facts dt{font:11px ui-monospace,monospace;letter-spacing:.12em;color:#d8b66a}.lab-facts dd{margin:5px 0 0}.premium-lab-form,.premium-assessment-form{display:grid;gap:18px;margin-top:24px}.premium-lab-form label,.premium-assessment-form label{display:grid;gap:8px;font-weight:650;color:#0a1424}.premium-lab-form textarea,.premium-lab-form input,.premium-lab-form select{width:100%;min-height:48px;border:1px solid rgba(10,20,36,.18);padding:12px 14px;background:#fff;color:#0a1424;border-radius:2px;font:inherit}.premium-lab-form textarea{min-height:94px;resize:vertical}.field-help{display:block;color:#64748b;font-size:.82rem;font-weight:400}.premium-assessment-form fieldset{border:1px solid rgba(10,20,36,.14);padding:18px 20px;display:grid;gap:12px}.premium-assessment-form legend{font-weight:700;color:#0a1424;padding:0 5px}.premium-assessment-form label{display:flex;grid-template-columns:none;align-items:flex-start;font-weight:500}.premium-assessment-form input{width:20px;height:20px;min-width:20px;accent-color:#a77b22}.premium-proof-receipt{margin-top:24px;border-color:rgba(203,163,74,.4)}.premium-proof-receipt dl{display:grid;gap:12px}.premium-proof-receipt dl div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(10,20,36,.1);padding:10px 0}.premium-proof-receipt dt{color:#64748b}.premium-proof-receipt dd{margin:0;font-weight:700;color:#0a1424;text-align:right}.premium-proof-row{display:grid;grid-template-columns:1fr auto;gap:5px 16px;padding:16px;border-left:3px solid #cba34a;background:#0a1424;color:#f8fafc}.premium-proof-row span{color:#d8b66a}.premium-proof-row p,.premium-proof-row small{grid-column:1/-1;color:#cbd5e1;margin:0}.premium-proof-row small{color:#94a3b8}.premium-locked-note{border-style:dashed}.premium-track-entry{margin-top:12px} @media(max-width:639px){.premium-track-status{display:grid;gap:10px}.premium-track-status small{margin-left:0}.premium-progress-strip{grid-template-columns:1fr;margin-bottom:22px}.premium-progress-strip li{min-height:0;border-right:0;border-bottom:1px solid rgba(10,20,36,.1);padding:13px 14px}.premium-progress-strip li:last-child{border-bottom:0}.premium-progress-strip li:not(:last-child)::after{top:auto;right:auto;bottom:-1px;left:29px;width:1px;height:10px}.premium-module-rail li{grid-template-columns:32px 1fr;gap:10px}.premium-module-rail li .secondary-action{grid-column:2;justify-self:start}.lab-facts{grid-template-columns:1fr}.premium-assessment-form fieldset{padding:15px}.premium-proof-receipt dl div{display:block}.premium-proof-receipt dd{text-align:left;margin-top:4px}.premium-lab-form,.premium-assessment-form{padding:16px}} @media(prefers-reduced-motion:reduce){.premium-view *{scroll-behavior:auto!important;transition:none!important}} /* DDA Lab catalog — dark override for the reused .premium-progress-strip. That component is deliberately a light/cream card strip everywhere it was designed for (Premium Track, P2 forms) — intentional there, not touched. The Lab reuses the same class for its 5-step strip but every other Lab surface is Deep Navy, so the unscoped light cards read as a broken theme leak against it. Scoped to #lab only: never changes Premium Track's own look. Also fixes the 5-item desktop grid, previously hardcoded to 4 columns (repeat(4,...)), which left the 5th step wrapping alone into an orphaned, visually empty row. */ #lab .premium-progress-strip{grid-template-columns:repeat(5,minmax(0,1fr));border-color:rgba(174,191,213,.18);background:transparent} #lab .premium-progress-strip li{background:linear-gradient(145deg,rgba(17,42,68,.78),rgba(7,18,31,.92));border-right-color:rgba(174,191,213,.14)} #lab .premium-progress-strip li:not(:last-child)::after{background:rgba(216,174,97,.35)} #lab .premium-progress-index{border-color:rgba(174,191,213,.28);color:#9fb0c4;background:rgba(255,255,255,.04)} #lab .premium-progress-strip strong{color:#edf1f6} #lab .premium-progress-strip small{color:#9fb0c4} #lab .premium-progress-strip li[data-state="active"]{background:linear-gradient(145deg,rgba(203,163,74,.22),rgba(17,42,68,.88));box-shadow:inset 0 -3px 0 #cba34a} #lab .premium-progress-strip li[data-state="active"] .premium-progress-index{border-color:#cba34a;color:#f0cf8a;background:rgba(203,163,74,.16)} #lab .premium-progress-strip li[data-state="complete"]{background:linear-gradient(145deg,rgba(78,159,140,.2),rgba(17,42,68,.88));box-shadow:inset 0 -3px 0 #4e9f8c} #lab .premium-progress-strip li[data-state="complete"] .premium-progress-index{border-color:#4e9f8c;color:#8fd9c4;background:rgba(78,159,140,.16)} #lab .premium-progress-strip li[data-state="complete"] small{color:#8fd9c4} #lab .premium-progress-strip li[data-state="locked"]{opacity:.68} #lab .premium-progress-strip li[data-state="locked"] .premium-progress-index{background:rgba(255,255,255,.03);color:#8390a0} @media(max-width:639px){#lab .premium-progress-strip li{border-bottom-color:rgba(174,191,213,.14)}} /* P2 visual correction — rail labels must remain legible on Deep Navy. */ .premium-module-rail strong{color:#f8fafc} @media(max-width:639px){#premium-track .section-intro{padding-top:24px}.premium-module-rail small{color:#cbd5e1}} /* ====================================================================== DDA ELITE UI — institutionnel, technologique, calme. Présentation uniquement : aucune logique applicative ni donnée métier. ====================================================================== */ :root{ --dda-elite-canvas:#060d17; --dda-elite-surface:#0a1424; --dda-elite-surface-raised:#101c2d; --dda-elite-line:rgba(174,191,213,.14); --dda-elite-ink:#edf1f6; --dda-elite-muted:#9ba8b8; --dda-elite-gold:#cbb174; --dda-elite-gold-soft:#e0cb9b; --dda-elite-blue:#718ba6; } /* Consistent, low-glare product surfaces; the guided Path palette is intentionally untouched. */ #dashboard.view,#journal.view,#progress.view,#profile.view,#markets.view{background-color:var(--dda-elite-canvas);color:var(--dda-elite-ink)} #dashboard .analysis-terminal, #journal .panel, #progress .panel, #profile .panel, #markets .index-card, #markets .market-calendar{ border-color:var(--dda-elite-line); border-radius:16px; background:linear-gradient(155deg,rgba(13,25,41,.98),rgba(8,18,31,.98)); box-shadow:0 16px 38px rgba(0,0,0,.16); } #dashboard .analysis-terminal{border-color:rgba(174,191,213,.16);box-shadow:0 24px 60px rgba(0,0,0,.22)} #dashboard .analysis-terminal-head h2,#journal .section-intro h1,#progress .section-intro h1,#profile .section-intro h1,#markets .section-intro h1{letter-spacing:-.025em} #dashboard .analysis-observation textarea,#journal :is(input,select,textarea),#profile :is(input,select,textarea){border-color:var(--dda-elite-line);background:#091523;color:var(--dda-elite-ink)} #dashboard .analysis-observation textarea:focus-visible,#journal :is(input,select,textarea):focus-visible,#profile :is(input,select,textarea):focus-visible{outline:2px solid rgba(203,177,116,.7);outline-offset:2px;border-color:var(--dda-elite-gold)} #markets .index-card{box-shadow:0 12px 30px rgba(0,0,0,.12)} #markets .index-card:hover{border-color:rgba(203,177,116,.3);box-shadow:0 16px 34px rgba(0,0,0,.18)} #markets .market-visit-cue{border-color:var(--dda-elite-line);background:rgba(10,20,36,.64)} /* The public landing uses the same quiet navy system with a restrained institutional gold. */ #landing .landing-editorial-shell{gap:clamp(30px,5vw,72px)} #landing .landing-main-copy{max-width:690px} #landing .landing-masthead{color:rgba(226,233,241,.62);letter-spacing:.14em} #landing .landing-masthead span{color:rgba(203,177,116,.76)} #landing .landing-main-copy .eyebrow.gold,#landing .landing-section-head .eyebrow.gold{color:var(--dda-elite-gold-soft)} #landing h1,#landing h2,#landing h3{ text-wrap:balance } #landing h1{color:#f1f3f5;letter-spacing:-.045em} #landing h1 em{color:var(--dda-elite-gold-soft);font-style:normal} #landing .landing-deck,#landing .landing-section-head>p:not(.eyebrow),#landing .ecosystem-copy>p:not(.eyebrow){color:#aab5c2;line-height:1.72} #landing .landing-free-proof{margin:20px 0 0;padding:14px 16px;border:1px solid rgba(174,191,213,.16);border-left:2px solid var(--dda-elite-gold);border-radius:12px;background:rgba(10,20,36,.52);max-width:620px} #landing .landing-free-proof-label{margin:0 0 8px;color:var(--dda-elite-gold-soft);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase} #landing .landing-free-proof ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;color:#c7d0db;font-size:.82rem;line-height:1.5} #landing .landing-free-proof li:before{content:'✓';margin-right:6px;color:var(--dda-elite-gold);font-weight:900} #landing .landing-free-proof strong{color:#f1f3f5} #landing .landing-free-proof small{display:block;margin-top:9px;color:#8f9dad;font-size:.72rem;line-height:1.45} #access .access-form-note{margin:10px 0 18px;color:#657486;font-size:.82rem;line-height:1.55} #access .onboarding-form-note{margin:10px 0 18px;color:#657486;font-size:.82rem;line-height:1.55} .lesson-main .feedback-next{display:block;margin-top:8px;color:#9eb0c2;font-size:.76rem;line-height:1.45} #landing .landing-actions .primary-action,#landing .landing-final-cta .primary-action{ border:1px solid rgba(239,220,176,.34); background:linear-gradient(120deg,#b39a68,#d0bc8d); color:#101722; box-shadow:0 9px 24px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.26); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } #landing .landing-actions .primary-action:hover,#landing .landing-final-cta .primary-action:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.32)} #landing .landing-secondary{color:#d8dfe7!important} #landing .landing-secondary span{color:var(--dda-elite-gold-soft)} #landing .landing-aperture{ min-height:520px; overflow:hidden; border:1px solid rgba(189,204,221,.18); border-radius:18px; background:radial-gradient(ellipse at 76% 23%,rgba(102,128,153,.16),transparent 34%),linear-gradient(145deg,#0a1422 0%,#0a1727 66%,#0b1b2d 100%); box-shadow:0 26px 64px rgba(0,0,0,.24); } #landing .landing-aperture .photo-scrim{background:linear-gradient(180deg,rgba(6,13,23,.2),rgba(6,13,23,.52) 46%,rgba(6,13,23,.94))} #landing .landing-edition{color:rgba(224,230,238,.58)} #landing .landing-aperture-copy strong{color:#eef1f5;font-size:clamp(2.4rem,4.8vw,4.2rem);letter-spacing:-.045em} #landing .landing-aperture-copy em{color:rgba(221,207,173,.9);font-size:clamp(1.15rem,2.4vw,1.8rem)} #landing .landing-signal{z-index:1;opacity:.1} #landing .landing-aperture .aperture-thread{opacity:.28} #landing .landing-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:26px;list-style:none;padding:0} #landing .landing-trust li{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:10px 12px;border:1px solid rgba(174,191,213,.12);border-radius:12px;background:rgba(10,20,36,.46);color:#aab5c2;font-size:.78rem;line-height:1.45} #landing .landing-trust .icon{flex:none;width:16px;height:16px;margin-top:1px;color:var(--dda-elite-gold)} #landing .landing-trust strong{color:var(--dda-elite-gold-soft);font-size:.86rem;font-variant-numeric:tabular-nums} /* Low-poly device mockups: CSS/SVG only, no WebGL, external feed, or remote image. */ #landing .landing-device-stage{position:absolute;z-index:2;inset:17% 5% 24%;perspective:1100px;transform-style:preserve-3d;pointer-events:none} #landing .landing-device-laptop{position:absolute;left:0;top:5%;width:83%;transform:rotateY(-10deg) rotateX(3deg);transform-style:preserve-3d;filter:drop-shadow(0 18px 22px rgba(0,0,0,.3))} #landing .landing-laptop-screen{overflow:hidden;padding:7px;border:1px solid rgba(205,216,229,.48);border-radius:11px 11px 5px 5px;background:linear-gradient(145deg,#142235,#0a1423);box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(4,9,16,.7)} #landing .landing-device-topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 8px;color:#afbbc8;font:700 7px/1.2 var(--dda-sans,system-ui,sans-serif);letter-spacing:.1em} #landing .landing-device-topbar span:last-child{display:flex;align-items:center;gap:5px;color:#c9bd9c;font-size:6px} #landing .landing-device-topbar i{width:5px;height:5px;border-radius:50%;background:#8eb6a8;box-shadow:0 0 0 3px rgba(142,182,168,.1)} #landing .landing-device-screen-body{padding:8px 9px 6px;border:1px solid rgba(174,191,213,.1);border-radius:6px;background:#070f1a} #landing .landing-device-chart-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px;color:#e2e7ed;font:600 8px/1.2 var(--dda-sans,system-ui,sans-serif)} #landing .landing-device-chart-head span{color:#8d9bad;font:500 6px/1.2 var(--dda-sans,system-ui,sans-serif)} #landing .landing-device-candles{display:block;width:100%;height:96px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)} #landing .landing-device-candles .device-chart-grid{fill:none;stroke:rgba(150,168,190,.1);stroke-width:.7} #landing .landing-device-candles .device-candle-muted{fill:none;stroke:#91aa9d;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #landing .landing-device-tools{display:flex;justify-content:space-between;gap:5px;margin-top:7px;color:#9eabb9;font:500 6px/1.2 var(--dda-sans,system-ui,sans-serif)} #landing .landing-device-tools span:first-child{color:#d6bf88} #landing .landing-laptop-base{width:109%;height:8px;margin-left:-4.5%;border:1px solid rgba(207,218,231,.24);border-top:0;border-radius:0 0 50% 50%;background:linear-gradient(180deg,#28384a,#111d2d 64%,#09111c);box-shadow:0 6px 10px rgba(0,0,0,.28)} #landing .landing-device-phone{position:absolute;right:0;bottom:2%;width:27%;min-width:104px;padding:5px;border:1px solid rgba(218,225,233,.54);border-radius:17px;background:linear-gradient(150deg,#182638,#0b1421);box-shadow:0 18px 34px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.13);transform:rotateY(9deg) rotateZ(4deg) translateZ(26px)} #landing .landing-phone-camera{position:absolute;z-index:1;top:7px;left:50%;width:25px;height:4px;border-radius:4px;background:#03070c;transform:translateX(-50%)} #landing .landing-phone-screen{display:flex;flex-direction:column;gap:7px;min-height:176px;padding:20px 8px 8px;border-radius:12px;background:linear-gradient(160deg,#0b1726,#08111d);color:#e8edf2} #landing .landing-phone-brand{color:#c6b17f;font:700 6px/1.2 var(--dda-sans,system-ui,sans-serif);letter-spacing:.09em} #landing .landing-phone-screen>strong{font:600 11px/1.25 var(--dda-sans,system-ui,sans-serif)} #landing .landing-phone-market{color:#9daaba;font:500 6px/1.3 var(--dda-sans,system-ui,sans-serif)} #landing .landing-phone-note{display:grid;gap:4px;padding:9px 7px;border:1px solid rgba(174,191,213,.13);border-radius:7px;background:rgba(255,255,255,.025)} #landing .landing-phone-note i{display:block;width:88%;height:3px;border-radius:2px;background:rgba(204,215,227,.38)} #landing .landing-phone-note i:nth-child(2){width:70%} #landing .landing-phone-note i:nth-child(3){width:52%;background:rgba(203,177,116,.55)} #landing .landing-phone-proof{display:flex;align-items:center;gap:4px;margin-top:auto;color:#aab7c3;font:500 5px/1.3 var(--dda-sans,system-ui,sans-serif)} #landing .landing-phone-proof b{width:5px;height:5px;border-radius:50%;background:#91b8a8} #landing .landing-device-caption{position:absolute;right:3%;bottom:-16px;color:rgba(221,207,173,.78);font:700 6px/1.2 var(--dda-sans,system-ui,sans-serif);letter-spacing:.14em} #landing .landing-3d-scene{z-index:1;right:8%;width:min(55%,340px);opacity:.2} #landing .landing-3d-orbit{animation-duration:30s} #landing .landing-3d-orbit-middle{animation-duration:25s} #landing .landing-3d-orbit-inner{animation-duration:21s} #landing .landing-3d-core{animation-duration:7s} #landing .landing-3d-node{animation-duration:8s;opacity:.7} #landing .landing-aperture-top,#landing .landing-aperture-copy{z-index:4} /* Editorial, non-live market cards reuse the existing Market Intelligence destination. */ #landing .domain-rail .landing-section-head h3{max-width:30ch;color:#e7ebef} #landing .domain-rail .landing-market-intro{max-width:68ch;margin:14px 0 22px;color:#9eabba;font-size:.9rem;line-height:1.65} #landing .domain-rail .landing-domain-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px} #landing .domain-rail .landing-domain-groups article{min-width:0;padding:18px 0 0;border:0;border-top:1px solid var(--dda-elite-line);border-radius:0;background:transparent} #landing .domain-rail .landing-domain-groups article+article{padding-left:0;border-left:0} #landing .domain-rail .landing-market-group{grid-column:1/-1} #landing .domain-rail .domain-label{margin:0 0 14px;color:#c9b27b;font-size:.67rem;letter-spacing:.13em} #landing .landing-market-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} #landing .landing-market-card{display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:124px;padding:13px 12px 10px;border:1px solid rgba(174,191,213,.14);border-radius:12px;background:linear-gradient(160deg,rgba(16,29,46,.92),rgba(9,19,32,.96));color:#e7ebef;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease} #landing .landing-market-card:hover,#landing .landing-market-card:focus-visible{transform:translateY(-2px);border-color:rgba(203,177,116,.4);background:#101e30;box-shadow:0 12px 26px rgba(0,0,0,.18)} #landing .landing-market-card:focus-visible{outline:2px solid var(--dda-elite-gold);outline-offset:3px} #landing .landing-market-card-head{display:flex;flex-direction:column;gap:4px;min-width:0} #landing .landing-market-card-head strong{overflow:hidden;color:#e9edf1;font-size:.78rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap} #landing .landing-market-card-head small{color:#94a2b3;font-size:.56rem;letter-spacing:.1em} #landing .landing-market-sparkline{display:block;width:100%;height:34px;overflow:visible;fill:none;stroke:#93a99d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.82} #landing .landing-market-sparkline.spark-forex{stroke:#9caec0} #landing .landing-market-sparkline.spark-actions{stroke:#b9aa83;opacity:.56} #landing .landing-market-sparkline.spark-indices{stroke:#91a6b7} #landing .landing-market-sparkline.spark-crypto{stroke:#b78f86;opacity:.52} #landing .landing-market-card-foot{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#8e9bac} #landing .landing-market-card-foot small{font-size:.56rem;line-height:1.25} #landing .landing-market-card-foot b{color:#c9b27b;font-size:.9rem;font-weight:500} #landing .landing-market-disclosure{max-width:88ch;margin:12px 0 0;color:#8593a4;font-size:.73rem;line-height:1.55} #landing .domain-rail .landing-domain-groups article:not(.landing-market-group)>div{display:flex;flex-wrap:wrap;gap:8px} #landing .domain-rail .landing-domain-groups article:not(.landing-market-group)>div span{padding:5px 9px;border:1px solid rgba(174,191,213,.11);border-radius:999px;color:#9ba8b8;font-size:.72rem} /* A restrained depth cue on real mastery and chapter states, not decorative dashboard noise. */ #landing .experience-flow li{transform-style:preserve-3d;transition:transform .28s ease,border-color .28s ease,background .28s ease} #landing .experience-flow li.is-active{transform:translateZ(4px);border-color:rgba(203,177,116,.27);background:linear-gradient(145deg,rgba(16,29,46,.74),rgba(10,20,36,.42))} #landing .experience-flow li.is-active .method-index{transform:translateZ(5px)} #path .journey-current{transform-style:preserve-3d} #progress .mastery-row-focused .mastery-level{transition:transform .3s ease,filter .3s ease} #progress .mastery-row-focused[data-proof-state="confirmed"] .mastery-level{transform:translateZ(3px)} @keyframes dda-elite-panel-arrive{from{opacity:.84;transform:translateY(7px) rotateX(-1deg)}to{opacity:1;transform:translateY(0) rotateX(0)}} #path.active .journey-current{animation:dda-elite-panel-arrive .38s cubic-bezier(.2,.7,.25,1) both;transform-origin:50% 0} /* Compact icon toolbar; all existing controls remain in place and keep their original IDs. */ #dashboard .analysis-terminal-tools{position:sticky;top:76px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin:12px 0 10px;padding:7px 9px;border:1px solid rgba(174,191,213,.12);border-radius:14px;background:rgba(7,16,28,.94);box-shadow:0 9px 24px rgba(0,0,0,.18);backdrop-filter:blur(12px)} #dashboard .terminal-tool-primary-group,#dashboard .terminal-tool-utility-group,#dashboard .terminal-edit-controls{display:flex;align-items:center;gap:5px;min-width:0} #dashboard .terminal-tool-utility-group{gap:9px} #dashboard .terminal-tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:42px;padding:0 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:#acb7c4;font:600 11px/1 var(--dda-sans,system-ui,sans-serif);transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease} #dashboard .terminal-tool svg,#dashboard .terminal-icon-button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round} #dashboard .terminal-tool:hover,#dashboard .terminal-tool:focus-visible{border-color:rgba(203,177,116,.28);background:rgba(203,177,116,.06);color:#e2d0a6} #dashboard .terminal-tool.active{border-color:rgba(203,177,116,.28);background:rgba(203,177,116,.1);color:#e0cb9b;box-shadow:inset 0 0 0 1px rgba(203,177,116,.05)} #dashboard .terminal-tool-label{font-size:10px;letter-spacing:.01em} #dashboard .terminal-zoom-dock{gap:5px;padding:0 5px 0 0} #dashboard .terminal-zoom-value{min-width:28px;color:#bac5d0;font:600 10px/1 var(--dda-sans,system-ui,sans-serif);text-align:center} #dashboard .terminal-zoom-dock input[type=range]{width:70px;accent-color:var(--dda-elite-gold)} #dashboard .terminal-pan-controls,#dashboard .terminal-edit-controls{display:flex;align-items:center;gap:4px} #dashboard .terminal-icon-button{width:38px;height:38px;min-width:38px;min-height:38px;border-color:rgba(174,191,213,.13);border-radius:10px;background:#0a1424;color:#aeb9c6;font-size:0;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease} #dashboard .terminal-icon-button:hover:not(:disabled),#dashboard .terminal-icon-button:focus-visible{border-color:rgba(203,177,116,.42);background:rgba(203,177,116,.08);color:#e1cd9e;transform:translateY(-1px)} #dashboard .terminal-icon-button:disabled{opacity:.38} #dashboard .analysis-chart-shell{border-color:rgba(174,191,213,.13);border-radius:14px;background:#060d17} #dashboard .analysis-chart-meta,#dashboard .analysis-chart-footer{border-color:rgba(174,191,213,.1);background:#0a1424} @media(max-width:899px){ #landing .landing-free-proof ul{display:grid;grid-template-columns:1fr;gap:4px} #landing .landing-trust{grid-template-columns:repeat(2,minmax(0,1fr))} #landing .landing-trust li:last-child{grid-column:1/-1} #landing .landing-device-stage{inset:18% 3% 25%} #landing .landing-device-laptop{width:84%} #landing .landing-device-phone{width:29%;min-width:100px} #landing .domain-rail .landing-domain-groups{grid-template-columns:1fr;gap:14px} #landing .domain-rail .landing-market-group{grid-column:auto} #landing .landing-market-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #landing .landing-market-card{min-height:116px} #landing .landing-experience,#landing .landing-product,#landing .landing-proof,#landing .landing-ecosystem,#landing .landing-free{padding-block:clamp(54px,8vw,72px)} } @media(max-width:700px){ #dashboard .analysis-terminal-tools{top:66px;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:6px;border-radius:13px} #dashboard .terminal-tool-primary-group{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:4px} #dashboard .terminal-tool{width:100%;min-width:44px;min-height:44px;padding:0;border-radius:10px} #dashboard .terminal-tool svg{width:19px;height:19px} #dashboard .terminal-tool-label{display:none} #dashboard .terminal-tool-utility-group{display:flex;justify-content:space-between;gap:7px;width:100%;padding-top:4px;border-top:1px solid rgba(174,191,213,.1)} #dashboard .terminal-zoom-dock{gap:4px;min-height:44px;padding:0} #dashboard .terminal-zoom-dock #terminal-zoom-out,#dashboard .terminal-zoom-dock #terminal-zoom-in{display:none} #dashboard .terminal-zoom-dock input[type=range]{width:54px;height:34px;margin:0} #dashboard .terminal-zoom-value{min-width:26px;font-size:10px} #dashboard .terminal-icon-button,#dashboard .terminal-edit-action{width:44px;height:44px;min-width:44px;min-height:44px} #dashboard .terminal-icon-button svg{width:19px;height:19px} #dashboard .terminal-pan-controls,#dashboard .terminal-edit-controls{gap:4px} #dashboard .analysis-chart-shell{scroll-margin-top:120px} #landing .landing-aperture{min-height:420px} #landing .landing-device-stage{inset:19% 3% 25%} #landing .landing-device-candles{height:78px} #landing .landing-device-phone{min-width:94px;width:30%} #landing .landing-phone-screen{min-height:156px} #landing .landing-aperture-copy strong{font-size:clamp(2.25rem,11vw,3.3rem)} #landing .landing-aperture-copy em{font-size:clamp(1.1rem,5.5vw,1.5rem)} } @media(max-width:420px){ #landing .landing-free-proof{padding:12px 13px} #landing .landing-free-proof small{font-size:.68rem} #landing .landing-trust{grid-template-columns:1fr;gap:6px} #landing .landing-trust li:last-child{grid-column:auto} #landing .landing-aperture{min-height:400px;padding:20px} #landing .landing-device-stage{inset:19% 1% 26%} #landing .landing-device-laptop{top:6%;width:84%} #landing .landing-device-phone{right:-1%;bottom:0;width:31%;min-width:88px} #landing .landing-device-topbar{padding:4px 5px;font-size:6px} #landing .landing-device-candles{height:68px} #landing .landing-phone-screen{min-height:144px;padding:18px 7px 7px} #landing .landing-device-caption{font-size:5px;letter-spacing:.1em} #landing .landing-market-card{min-height:108px;padding:11px 9px 8px} #landing .landing-market-card-head strong{font-size:.72rem} #landing .landing-market-card-foot small{font-size:.53rem} } @media(hover:hover) and (prefers-reduced-motion:no-preference){ #landing .landing-aperture:hover .landing-device-laptop{transform:rotateY(-7deg) rotateX(2deg) translateZ(5px)} #landing .landing-aperture:hover .landing-device-phone{transform:rotateY(6deg) rotateZ(2deg) translateZ(34px)} #landing .landing-device-laptop,#landing .landing-device-phone{transition:transform .42s cubic-bezier(.2,.75,.24,1)} } @media(prefers-reduced-motion:reduce){ #landing .landing-device-laptop,#landing .landing-device-phone,#landing .landing-market-card,#dashboard .terminal-tool,#dashboard .terminal-icon-button,#landing .experience-flow li{transition:none!important;animation:none!important} #landing .landing-3d-orbit,#landing .landing-3d-core,#landing .landing-3d-node{animation:none!important} #path.active .journey-current{animation:none!important} } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ #landing .landing-3d-orbit,#landing .landing-3d-core,#landing .landing-3d-node{animation:none!important} } /* Keep every tactile zoom/pan/edit target visible, even at narrow phones. */ @media(max-width:700px){ #dashboard .terminal-tool-utility-group{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"zoom pan" "edits edits";gap:4px 6px;justify-content:initial} #dashboard .terminal-zoom-dock{grid-area:zoom;justify-content:flex-start} #dashboard .terminal-zoom-dock #terminal-zoom-out,#dashboard .terminal-zoom-dock #terminal-zoom-in{display:inline-grid} #dashboard .terminal-zoom-dock input[type=range]{width:48px;height:44px;margin:0} #dashboard .terminal-pan-controls{grid-area:pan;justify-self:end} #dashboard .terminal-edit-controls{grid-area:edits;justify-self:end} } @media(max-width:380px){ #dashboard .terminal-zoom-dock input[type=range]{width:36px} #dashboard .terminal-zoom-value{display:none} } /* ====================================================================== DDA ELITE — whole-platform surface system. Strictly presentational cascade: IDs, routes, data, and state classes stay intact. ====================================================================== */ :root{ --dda-elite-canvas:#060d17; --dda-elite-surface:#0a1424; --dda-elite-surface-raised:#101c2d; --dda-elite-surface-soft:#0d1929; --dda-elite-line:rgba(81,157,226,.22); --dda-elite-line-strong:rgba(95,182,255,.36); --dda-elite-ink:#edf1f6; --dda-elite-muted:#b2c0d0; --dda-elite-gold:#e6ad3f; --dda-elite-gold-soft:#f3c76c; --dda-elite-blue:#62b8ed; --dda-elite-teal:#42d4c5; } body,body.public-shell{background:var(--dda-elite-canvas);color:var(--dda-elite-ink)} .app-shell,main{background:transparent} #landing.view,#access.view,#dashboard.view,#path.view,#lesson.view,#lesson-m02.view,#lesson-m03.view,#lesson-m11.view,#lesson-m12.view,#lesson-m13.view,#lesson-p21.view,#lesson-p22.view,#premium-track.view,#premium-lab.view,#premium-assessment.view,#progress.view,#journal.view,#resources.view,#membership.view,#markets.view,#brokers.view,#support.view,#community.view,#practice.view,#intelligence.view,#lab.view,#lesson-lab1.view,#lesson-lab2.view,#lesson-lab3.view,#lesson-lab4.view,#lesson-lab-capstone.view,#profile.view{background:var(--dda-elite-canvas)!important;color:var(--dda-elite-ink)} /* Product chrome and global navigation. */ .prototype-banner{border-bottom:1px solid var(--dda-elite-line);background:linear-gradient(90deg,#0a1424,#0d1929);color:#aab6c4} .topbar{border-bottom:1px solid rgba(174,191,213,.11);background:rgba(7,15,26,.91);color:var(--dda-elite-ink)} .sidebar{border-right:1px solid rgba(174,191,213,.11);background:linear-gradient(180deg,#091321,#07101b)} .sidebar-foot{border-top:1px solid rgba(174,191,213,.1)} .nav-section-label{color:#8291a3;letter-spacing:.14em} .nav-item{border:1px solid transparent;border-radius:9px;color:#a9b5c2;transition:background .18s ease,border-color .18s ease,color .18s ease} .nav-item:hover{border-color:rgba(174,191,213,.13);background:rgba(255,255,255,.035);color:#e7ebf0} .nav-item.active{border-color:rgba(203,177,116,.2);background:rgba(203,177,116,.085);color:var(--dda-elite-gold-soft)} .profile-chip{border:1px solid rgba(174,191,213,.1);border-radius:12px;background:rgba(255,255,255,.025);color:var(--dda-elite-ink)} .avatar{border:1px solid rgba(203,177,116,.24);background:linear-gradient(145deg,#18283a,#0a1424);color:var(--dda-elite-gold-soft)} .mobile-brand{color:#e5eaf0} .icon-button{border:1px solid rgba(174,191,213,.16);border-radius:10px;background:rgba(10,20,36,.8);color:#c7d0da} .mobile-nav{border-top:1px solid rgba(174,191,213,.14);background:rgba(7,15,26,.96);box-shadow:0 -10px 30px rgba(0,0,0,.16)} .mobile-nav button{color:#96a3b2} .mobile-nav button.active{color:var(--dda-elite-gold-soft)} .public-header{border-bottom:1px solid rgba(174,191,213,.12);background:rgba(6,13,23,.9)} .public-header-nav button,.public-login,.public-menu summary{color:#c1cad4} .public-header-nav button:hover,.public-login:hover,.public-menu summary:hover{color:var(--dda-elite-gold-soft)} .public-menu-panel,.public-footer{border-color:var(--dda-elite-line);background:#091523;color:#dce3ea} .public-menu-panel a{color:#dce3ea} .public-menu-panel a:hover{background:rgba(203,177,116,.08);color:var(--dda-elite-gold-soft)} .public-footer{border-top:1px solid var(--dda-elite-line)} /* Shared restrained glass surfaces. Cards stay opaque enough for legibility and mobile performance. */ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.resource-feature,.resource-reader,.plan-card,.membership-status-line,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.broker-criteria-panel,.broker-list-panel,.support-faq-panel,.support-contact,.community-featured-card,.future-principle,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form,.certificate-mock,.result-card,.principle,.example-callout,.competency-check-block,.result-stats,.mastery-row,.progress-stat,.next-step-panel,.practice-proof-row,.practice-proof-receipt,.terminal-aperture,.terminal-two>section,.terminal-family-copy,.library-shelf){ border-color:var(--dda-elite-line); background:linear-gradient(155deg,rgba(16,28,45,.96),rgba(10,20,36,.96)); color:var(--dda-elite-ink); box-shadow:0 14px 34px rgba(0,0,0,.17); } .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.resource-feature,.resource-reader,.plan-card,.membership-status-line,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.broker-criteria-panel,.broker-list-panel,.support-faq-panel,.support-contact,.community-featured-card,.future-principle,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form,.certificate-mock,.result-card,.principle,.example-callout,.competency-check-block,.result-stats,.mastery-row,.progress-stat,.next-step-panel,.practice-proof-row,.practice-proof-receipt,.terminal-aperture,.terminal-two>section,.terminal-family-copy,.library-shelf){border-radius:14px} #landing .landing-aperture,#landing .landing-market-card,#access .access-card,#dashboard .analysis-terminal,#dashboard .terminal-lead,#path .journey-current,#progress .panel,#journal .journal-panel,#journal .journal-composer,#resources .resource-feature,#resources .resource-reader,#membership .plan-card,#markets .market-zone,#markets .market-brief,#markets .brvm-panel,#markets .market-calendar,#brokers .panel,#brokers .broker-row,#support .support-faq-panel,#support .support-contact,#community .community-featured-card,#practice .community-featured-card,#intelligence .community-featured-card,#profile .profile-panel,#profile .preference-panel,#premium-track .panel,#premium-lab .panel,#premium-assessment .panel{border:1px solid var(--dda-elite-line)} #landing .landing-aperture,#access .access-card,#dashboard .analysis-terminal,#dashboard .terminal-lead,#progress .panel,#journal .journal-panel,#journal .journal-composer,#resources .resource-feature,#resources .resource-reader,#membership .plan-card,#markets .market-zone,#markets .market-brief,#markets .brvm-panel,#markets .market-calendar,#brokers .panel,#brokers .broker-row,#support .support-faq-panel,#support .support-contact,#community .community-featured-card,#practice .community-featured-card,#intelligence .community-featured-card,#profile .profile-panel,#profile .preference-panel,#premium-track .panel,#premium-lab .panel,#premium-assessment .panel{background-color:rgba(10,20,36,.94)} @supports(backdrop-filter:blur(1px)){ #landing .landing-aperture,#access .access-card,#dashboard .analysis-terminal,#dashboard .terminal-lead,#journal .journal-panel,#journal .journal-composer,#progress .panel,#resources .resource-feature,#resources .resource-reader,#membership .plan-card,#markets .market-zone,#brokers .panel,#brokers .broker-row,#support .support-faq-panel,#support .support-contact,#community .community-featured-card,#practice .community-featured-card,#intelligence .community-featured-card,#profile .profile-panel,#profile .preference-panel,#premium-track .panel,#premium-lab .panel,#premium-assessment .panel{backdrop-filter:blur(6px)} } @media(max-width:700px), (prefers-reduced-transparency:reduce){ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.journal-panel,.journal-composer,.resource-feature,.plan-card,.market-zone,.broker-row,.support-faq-panel,.support-contact,.community-featured-card,.premium-track-status,.premium-lab-form,.premium-assessment-form){backdrop-filter:none} } @supports not (backdrop-filter:blur(1px)){ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.journal-panel,.journal-composer,.resource-feature,.plan-card,.market-zone,.broker-row,.support-faq-panel,.support-contact,.community-featured-card,.premium-track-status,.premium-lab-form,.premium-assessment-form){background-color:#0a1424} } /* All forms share the same calm, accessible field treatment; validation and disabled state remain native. */ .view :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--dda-elite-line-strong);background:#091523;color:var(--dda-elite-ink);color-scheme:dark} .view :is(input,select,textarea)::placeholder{color:#8492a2;opacity:1} .view select option{background:#0a1424;color:#edf1f6} .view :is(input[type=checkbox],input[type=radio]){accent-color:var(--dda-elite-gold)} .view :is(input,select,textarea):disabled{border-color:rgba(174,191,213,.09);background:#0a1424;color:#8390a0;opacity:.68} #access .access-card,#access .access-card :is(label,h2,p,small,.eyebrow),#access .access-card :is(input,select,textarea){color:var(--dda-elite-ink)} #access .access-card :is(input,select,textarea){background:#091523} #access .access-card .consent{border-color:var(--dda-elite-line);background:rgba(255,255,255,.025)} #access .access-photo .photo-scrim,#landing .landing-institution-photo .photo-scrim,#brokers .view-photo-band .photo-scrim,#path .view-photo-band .photo-scrim,#progress .view-photo-band .photo-scrim,#community .community-hero .photo-scrim,#practice .community-hero .photo-scrim,#intelligence .community-hero .photo-scrim{background:linear-gradient(180deg,rgba(6,13,23,.08),rgba(6,13,23,.35) 44%,rgba(6,13,23,.88))} #access .access-illustration .lane-a,#access .access-illustration path:not(.lane-a){stroke:rgba(184,199,216,.43)} #access .access-illustration text{fill:#a4b0be} .form-error{color:#ffb4ab} .form-note,.field-help{color:#a4b0be} /* Learning and validation: remove every legacy paper/cream block without repainting semantic states. */ :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22) .lesson-main :is(.principle,.example-callout,.competency-check-block,.targets,.result-card,.result-stats,.certificate-mock,.play-button){border-color:var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22) .lesson-main :is(.principle,.example-callout,.competency-check-block,.targets,.result-card,.result-stats,.certificate-mock,.play-button) :is(h2,h3,h4,p,strong,span,li,dt,dd,small,label){color:inherit} :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22) .lesson-main .play-button{border:1px solid var(--dda-elite-line-strong)} :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone) .lesson-loop li:not(:last-child):after{background:rgba(174,191,213,.22)} :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone) .lesson-loop li.done:not(:last-child):after{background:#2e8cff} :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone) .lesson-loop li.done .loop-bead{background:#2e8cff;border-color:#2e8cff} :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone) .lesson-loop li.now .loop-bead{background:var(--dda-elite-gold-soft);box-shadow:0 0 0 4px rgba(203,177,116,.14)} #progress .certificate-mock{border-color:rgba(203,177,116,.32);background:linear-gradient(155deg,#122035,#0a1424);color:var(--dda-elite-ink)} #progress .certificate-mock :is(h4,p,strong,span){color:inherit} #progress .progress-stat{border:1px solid var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #progress .progress-stat.featured{border-color:rgba(203,177,116,.24)} #progress .mastery-row,#progress .proof-timeline li{border-color:var(--dda-elite-line);background:rgba(10,20,36,.78);color:var(--dda-elite-ink)} #progress .practice-proof-row,.practice-proof-row,.premium-proof-row{border:1px solid var(--dda-elite-line);background:linear-gradient(145deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} .practice-proof-row :is(strong,p,span,small),.premium-proof-row :is(strong,p,span,small){color:inherit} .is-retry .practice-proof-icon{border:1px solid rgba(203,177,116,.24);background:rgba(203,177,116,.1);color:#e0cb9b} .is-validated .practice-proof-icon{border:1px solid rgba(120,170,159,.28);background:rgba(120,170,159,.1);color:#9bc8bb} .progress-ring{background:radial-gradient(circle closest-side,#091523 76%,transparent 79% 99%),conic-gradient(var(--gold) calc(var(--progress)*1%),rgba(174,191,213,.12) 0)} /* Personal work, journal, profile and preferences. */ #journal .journal-tabs{border-bottom:1px solid var(--dda-elite-line)} #journal .journal-tab{border:1px solid transparent;color:#aab5c2} #journal .journal-tab.active{border-color:rgba(203,177,116,.28);background:rgba(203,177,116,.09);color:var(--dda-elite-gold-soft)} #journal .journal-empty,#journal .journal-entry-card,#journal .weekly-review-locked,#journal .weekly-review-evidence,#journal .journal-source-context,#journal .plan-group,#journal .journal-future-grid article{border:1px solid var(--dda-elite-line);background:linear-gradient(150deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #journal .journal-empty :is(h2,p),#journal .journal-entry-card :is(h2,h3,p,dd),#journal .weekly-review-locked :is(h2,p),#journal .weekly-review-evidence :is(strong,p),#journal .journal-future-grid article :is(span,strong,p){color:inherit} #journal .journal-count,#journal .journal-entry-market{color:#dbe2e9} #profile .profile-panel,#profile .preference-panel{border:1px solid var(--dda-elite-line);background:linear-gradient(155deg,rgba(16,28,45,.96),rgba(10,20,36,.96));color:var(--dda-elite-ink)} #profile .profile-large-avatar{border:1px solid rgba(203,177,116,.28);background:linear-gradient(145deg,#17283b,#0a1424);color:var(--dda-elite-gold-soft)} #profile .profile-progress-strip,#profile .preference-row,#profile .activity-summary,#profile .empty-profile{border-color:var(--dda-elite-line);background:rgba(255,255,255,.025);color:var(--dda-elite-ink)} #profile .profile-fields :is(input,select){background:#091523;color:var(--dda-elite-ink)} #profile .privacy-note{border-color:var(--dda-elite-line);background:rgba(255,255,255,.025);color:#aeb9c6} /* Explore, regional markets, membership and help. */ #resources .resource-feature,#resources .resource-reader{border:1px solid var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #resources .library-shelf{border-color:var(--dda-elite-line);background:rgba(10,20,36,.42)} #resources .library-entry{border-bottom-color:var(--dda-elite-line)} #resources .resource-reader .reader-close{border:1px solid var(--dda-elite-line);background:#101c2d;color:#e7ebf0} #membership .plan-card,#membership .membership-status-line,#membership .membership-roadmap,#membership .family-panel,#membership .membership-guardrails,#membership .next-step-panel{border:1px solid var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #membership .plan-card :is(h2,p,li,small),#membership .family-copy :is(h2,p){color:inherit} #membership .premium-plan{border-color:rgba(203,177,116,.28)} #membership .dda-community-visual.light{border-color:var(--dda-elite-line);background:linear-gradient(145deg,#0d1929,#0a1424)} #membership .photo-scrim.light{background:linear-gradient(180deg,rgba(6,13,23,.08),rgba(6,13,23,.85))} #markets .market-visit-cue,#markets .market-zone,#markets .index-card,#markets .market-brief,#markets .brvm-panel,#markets .market-calendar,#markets .journal-link-block{border-color:var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #markets :is(.market-brief,.brvm-panel,.market-calendar,.journal-link-block) :is(h2,h3,p,strong,li,small,dt,dd){color:inherit} #markets .brvm-panel{border-color:rgba(203,177,116,.18)} #brokers .broker-row,#brokers .broker-empty,#brokers .broker-criteria-panel,#brokers .broker-list-panel{border:1px solid var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #brokers .broker-monogram{border:1px solid rgba(203,177,116,.24);background:#0a1424;color:var(--dda-elite-gold-soft)} #brokers .broker-row :is(h2,p,dt,dd,strong,small){color:inherit} #brokers .broker-controls select{background:#091523;color:var(--dda-elite-ink)} #support .support-faq-panel,#support .support-contact{border:1px solid var(--dda-elite-line);background:linear-gradient(155deg,#101c2d,#0a1424);color:var(--dda-elite-ink)} #support .support-faq-panel details{border-bottom:1px solid var(--dda-elite-line)} #support .support-faq-panel summary{min-height:44px;color:#e5eaf0} #support .support-contact :is(input,select,textarea){background:#091523;color:var(--dda-elite-ink)} /* Honest future surfaces: still premium, but visibly inactive and never simulated. */ :is(#community,#practice,#intelligence) .community-tiles-note, :is(#community,#practice,#intelligence) .community-spaces, :is(#community,#practice,#intelligence) .community-featured-card, :is(#community,#practice,#intelligence) .future-principle, :is(#community,#practice,#intelligence) .intelligence-boundaries article, :is(#community,#practice,#intelligence) .community-tile, :is(#community,#practice,#intelligence) .community-cta{border-color:var(--dda-elite-line);background:linear-gradient(155deg,rgba(16,28,45,.92),rgba(10,20,36,.95));color:var(--dda-elite-ink)} :is(#community,#practice,#intelligence) :is(.community-featured-copy,.future-principle,.intelligence-boundaries article) :is(h2,h3,p,strong,span){color:inherit} :is(#community,#practice,#intelligence) .community-tile{border:1px solid var(--dda-elite-line);border-radius:12px} :is(#community,#practice,#intelligence) .community-spaces-list .chevron-row{border:1px solid var(--dda-elite-line);border-radius:12px;background:rgba(10,20,36,.8);color:var(--dda-elite-ink)} :is(#community,#practice,#intelligence) .community-spaces-list .chevron-row:hover{border-color:rgba(203,177,116,.32);background:#101c2d} /* Shared overlays/feedback cannot fall back to paper-white outside a view. */ .toast,.storage-warning,#gate-layer .gate-card,#resource-reader{border:1px solid var(--dda-elite-line-strong);border-radius:14px;background:rgba(10,20,36,.97);color:var(--dda-elite-ink);box-shadow:0 20px 48px rgba(0,0,0,.38)} .toast :is(p,strong,span),.storage-warning :is(p,strong,span),#gate-layer .gate-card :is(h2,h3,p,small){color:inherit} #gate-layer{background:rgba(3,8,15,.76)} #gate-layer .gate-card{backdrop-filter:blur(10px)} .disclosure,.future-label,.demo-note,.status-line{color:#9ba8b8} /* Consistent keyboard focus and reduced-motion fallbacks; no action or status is hidden. */ :where(button,a[href],input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--dda-elite-gold-soft);outline-offset:3px;box-shadow:0 0 0 4px rgba(203,177,116,.12)} button:disabled{cursor:not-allowed} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} .view.active{animation:none!important} .view :is(button,a[href],summary,.panel,.journey-current,.market-card,.index-card,.broker-row,.community-tile,.community-featured-card){transition:none!important;animation:none!important;transform:none!important} .view .progress-ring{animation:none!important} } @media(max-width:700px){ .toast,.storage-warning,#gate-layer .gate-card,#resource-reader{max-width:calc(100vw - 24px);} #gate-layer .gate-card{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);overflow:auto} } /* Small form-state surfaces use the same measured DDA accent, never a white flash. */ #access .step-indicator span.active,#journal .journal-step-indicator span.active{border-color:var(--dda-elite-gold);background:var(--dda-elite-gold);color:#101722} #premium-assessment .premium-assessment-form fieldset{border:1px solid var(--dda-elite-line);border-radius:12px;background:rgba(10,20,36,.72);color:var(--dda-elite-ink)} #premium-assessment .premium-assessment-form legend{color:#e2e8ef} #premium-assessment .premium-assessment-form label{color:#c3ccd6} /* Final composition polish: let the product mockups breathe instead of stacking a duplicate slogan over them. */ #landing .landing-aperture-copy{display:none!important} @media(min-width:1100px){#landing .landing-aperture{align-self:start;margin-top:clamp(42px,5vw,72px)}} #dashboard .analysis-terminal{scroll-margin-top:88px} #dashboard .terminal-divider-go{flex:none;margin-top:12px;color:var(--dda-elite-gold-soft);white-space:nowrap} @media(max-width:700px){#dashboard .terminal-divider-go{margin-left:0}} /* Nested device content must not inherit the hero's display headline scale. */ #landing .landing-device-chart-head strong{margin:0;color:inherit;font:600 8px/1.2 var(--dda-sans,system-ui,sans-serif)} #landing .landing-phone-screen>strong{margin:0} /* Future competency notes are informative surfaces, not cream cards. */ #path .journey-future-note,#progress .mastery-context-note{border-color:rgba(174,191,213,.16);background:rgba(10,20,36,.78);color:#9eabba} #progress .mastery-context-note strong{color:#e6ebf0} /* Progress is a work surface: keep its poster texture, with the DDA colors clearly present. */ #progress .view-photo-band .photo-fill{filter:saturate(.68) brightness(.8)} #progress .view-photo-band .photo-scrim{background:linear-gradient(180deg,rgba(6,13,23,.34),rgba(6,13,23,.48) 44%,rgba(6,13,23,.8))} /* ====================================================================== DDA AURORA — signature lumineuse propriétaire, inspirée par la matière, pas par une maquette SaaS générique. L'Aperture + preuves restent le motif. ====================================================================== */ :root{ --dda-aurora-electric:#2588ff; --dda-aurora-cyan:#39d6cf; --dda-aurora-beam:rgba(37,136,255,.22); --dda-aurora-glass:rgba(10,26,45,.88); --dda-aurora-edge:rgba(85,170,245,.32); --dda-aurora-gold-glint:rgba(242,185,74,.24); --blue:#1673d1; --blue-2:#29c5cf; --teal:#20b2a2; --gold:#e6ad3f; --gold-soft:#f3c76c; --cta-blue:#155fde; --cta-blue-2:#22b8d2; } /* Static optical depth across every route; background-color remains #060d17. */ :is(#landing,#access,#dashboard,#path,#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#premium-track,#premium-lab,#premium-assessment,#progress,#journal,#resources,#membership,#markets,#brokers,#support,#community,#practice,#intelligence,#profile,#lab,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone).view{ background-image: radial-gradient(ellipse 54% 26% at 96% 2%,rgba(37,136,255,.22),transparent 74%), radial-gradient(ellipse 44% 25% at 0% 44%,rgba(39,188,198,.12),transparent 76%), radial-gradient(ellipse 50% 24% at 72% 100%,rgba(230,173,63,.075),transparent 75%), linear-gradient(118deg,transparent 44%,rgba(90,173,255,.045) 45%,transparent 46%) !important; background-attachment:fixed; } /* Smoked-glass work surfaces: translucency reveals the route's DDA light field. */ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.terminal-aperture,.terminal-mi,.terminal-two,.terminal-family,.journal-panel,.journal-composer,.journal-entry-card,.journal-empty,.journal-source-context,.weekly-review-evidence,.weekly-review-locked,.resource-feature,.resource-reader,.library-shelf,.landing-plan-card,.plan-card,.membership-status-line,.membership-roadmap,.membership-guardrails,.family-panel,.market-zone,.market-brief,.brvm-panel,.market-calendar,.index-card,.journal-link-block,.broker-row,.broker-empty,.broker-criteria-panel,.broker-list-panel,.support-faq-panel,.support-contact,.community-spaces,.community-featured-card,.community-tile,.community-cta,.future-principle,.intelligence-boundaries article,.premium-track-status,.premium-lab-form,.premium-assessment-form,.certificate-mock,.result-card,.principle,.example-callout,.competency-check-block,.result-stats,.mastery-row,.progress-stat,.next-step-panel,.practice-proof-row,.practice-proof-receipt,.journey-future-note,.library-entry){ border-color:var(--dda-aurora-edge); background:linear-gradient(142deg,rgba(22,52,83,.86),rgba(8,19,34,.9)); box-shadow:0 18px 44px rgba(0,0,0,.22),0 0 0 1px rgba(40,139,255,.065) inset,0 1px rgba(255,255,255,.055) inset; } #path .journey-current,#path .journey-future-note{ border-color:var(--dda-aurora-edge); background:linear-gradient(142deg,rgba(20,43,68,.83),rgba(8,19,34,.9)); box-shadow:0 20px 48px rgba(0,0,0,.24),0 0 32px rgba(25,119,242,.075),0 1px rgba(255,255,255,.06) inset; } #path .journey-current{color:var(--dda-elite-ink)} #path .journey-current :is(h2,p,small,strong,span){color:inherit} @supports(backdrop-filter:blur(1px)){ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.terminal-aperture,.journal-panel,.journal-composer,.journal-entry-card,.resource-feature,.resource-reader,.landing-plan-card,.plan-card,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.support-faq-panel,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form,.journey-future-note){ backdrop-filter:blur(10px) saturate(118%); } #path .journey-current{backdrop-filter:blur(10px) saturate(118%)} } /* DDA's Aperture: blue instrument light, gold proof glints, reflected desk pool. */ #landing .landing-aperture{ isolation:isolate; border-color:rgba(93,173,255,.34); background-color:#081321; box-shadow:0 32px 82px rgba(0,0,0,.38),0 0 58px rgba(18,113,244,.16),0 0 0 1px rgba(224,203,155,.055) inset; } #landing .landing-aperture .photo-scrim{ background: radial-gradient(ellipse 34% 30% at 17% 72%,rgba(34,132,255,.29),transparent 78%), radial-gradient(ellipse 38% 28% at 78% 48%,rgba(10,157,242,.20),transparent 78%), linear-gradient(180deg,rgba(6,13,23,.12),rgba(6,13,23,.34) 42%,rgba(6,13,23,.88)); } #landing .landing-device-stage{animation:dda-aperture-float 9s cubic-bezier(.45,0,.55,1) infinite;} #landing .landing-device-stage::before{ content:"";position:absolute;z-index:0;inset:20% 3% 1%;border-radius:50%;pointer-events:none; background:radial-gradient(ellipse at 52% 54%,rgba(37,136,255,.52),rgba(29,116,219,.25) 35%,rgba(39,201,196,.15) 54%,transparent 74%); filter:blur(24px);transform:translateZ(-24px);animation:dda-desk-reflection 7.5s ease-in-out infinite; } #landing .landing-device-laptop{z-index:2;filter:drop-shadow(0 20px 24px rgba(0,0,0,.38)) drop-shadow(0 0 18px rgba(35,135,255,.16));} #landing .landing-device-phone{z-index:3;box-shadow:0 20px 38px rgba(0,0,0,.42),0 0 22px rgba(39,144,255,.14),inset 0 1px rgba(255,255,255,.16);} #landing .landing-device-caption{z-index:4;color:rgba(166,205,255,.9);text-shadow:0 0 16px rgba(49,145,255,.35)} #landing .landing-3d-scene{opacity:.44;filter:drop-shadow(0 0 24px rgba(26,139,255,.3));mix-blend-mode:screen} #landing .landing-3d-orbit{border-color:rgba(75,168,255,.32);box-shadow:0 0 18px rgba(26,129,255,.12)} #landing .landing-3d-core{box-shadow:0 0 0 1px rgba(89,185,255,.32),0 0 34px rgba(23,132,255,.28),inset 0 0 22px rgba(56,154,255,.14)} #landing .landing-3d-node{border-color:rgba(95,176,255,.32);background:rgba(8,22,39,.84);color:#b8ddff;box-shadow:0 0 20px rgba(21,125,244,.14)} #landing .landing-device-candles{filter:drop-shadow(0 0 5px rgba(52,163,255,.2))} @keyframes dda-aperture-float{ 0%,100%{transform:translate3d(0,0,0) rotateX(0deg)} 50%{transform:translate3d(0,-5px,0) rotateX(.55deg)} } @keyframes dda-desk-reflection{ 0%,100%{opacity:.66;transform:translate3d(-1%,0,-24px) scale(.97)} 50%{opacity:1;transform:translate3d(1%,-2px,-24px) scale(1.03)} } @keyframes dda-reveal{ from{opacity:0;transform:translateY(8px) perspective(900px) rotateX(-.8deg)} to{opacity:1;transform:translateY(0) perspective(900px) rotateX(0deg)} } /* The DDA proof thread catches light only on real active/confirmed states. */ #progress .mastery-row-focused[data-proof-state="confirmed"] .mastery-level, #progress .proof-timeline .done .proof-dot, :is(#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22) .lesson-loop li.now .loop-bead, .terminal-thread-bead.is-active{ filter:drop-shadow(0 0 8px rgba(35,145,255,.34)); } #progress .mastery-row-focused[data-proof-state="confirmed"]{box-shadow:0 18px 46px rgba(0,0,0,.2),0 0 28px rgba(24,129,244,.1),0 1px rgba(255,255,255,.045) inset} #dashboard .analysis-terminal-tools{border-color:rgba(79,157,255,.22);background:rgba(7,17,30,.86);box-shadow:0 12px 34px rgba(0,0,0,.26),0 0 24px rgba(18,119,233,.08)} #dashboard .analysis-chart-shell{box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 28px rgba(18,119,233,.08),0 0 0 1px rgba(91,169,255,.08)} #dashboard .terminal-tool.active{border-color:rgba(62,157,255,.44);background:linear-gradient(145deg,rgba(27,119,224,.2),rgba(12,57,103,.17));color:#9fd3ff;box-shadow:0 0 20px rgba(24,132,255,.16),inset 0 0 0 1px rgba(101,184,255,.1)} /* Blue-light CTAs are reserved for genuine actions; DDA gold remains the proof accent. */ .primary-action,.public-start,.landing-mobile-cta button,#landing .landing-actions .primary-action,#landing .landing-final-cta .primary-action{ border:1px solid rgba(113,194,255,.58); background:linear-gradient(112deg,#155fde 0%,#2588ff 46%,#39d6cf 100%); color:#fff; box-shadow:0 10px 28px rgba(9,99,234,.32),0 0 28px rgba(37,136,255,.24),0 0 18px rgba(39,214,207,.12),inset 0 1px rgba(255,255,255,.28); text-shadow:0 1px 5px rgba(4,28,69,.28); transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,border-color .22s ease; } .public-start{border-radius:999px} /* Interactive depth is restrained, opt-in to hover hardware, and never tilts controls. */ .view.active :is(.journey-current,.landing-market-card,.landing-plan-card,.plan-card,.journal-entry-card,.resource-feature,.broker-row,.community-tile,.chevron-row){ transform-style:preserve-3d; transition:transform .28s cubic-bezier(.2,.72,.24,1),border-color .28s ease,box-shadow .28s ease,background .28s ease; } @media(hover:hover) and (prefers-reduced-motion:no-preference){ .view.active :is(.journey-current,.landing-market-card,.landing-plan-card,.plan-card,.journal-entry-card,.resource-feature,.broker-row,.community-tile,.chevron-row):hover{ transform:translateY(-3px) perspective(1000px) rotateX(.45deg); border-color:rgba(82,171,255,.42); box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 26px rgba(20,128,244,.13),0 1px rgba(255,255,255,.07) inset; } .primary-action:hover:not(:disabled),.public-start:hover:not(:disabled),.landing-mobile-cta button:hover:not(:disabled),#landing .landing-actions .primary-action:hover:not(:disabled),#landing .landing-final-cta .primary-action:hover:not(:disabled){ transform:translateY(-2px); border-color:rgba(154,218,255,.82); box-shadow:0 14px 34px rgba(9,99,234,.38),0 0 34px rgba(28,142,255,.28),inset 0 1px rgba(255,255,255,.32); filter:saturate(1.12) brightness(1.04); } } /* Keep the glass readable and inexpensive on phones, data-saver, and transparency-sensitive setups. */ @media(max-width:700px){ :is(#landing,#access,#dashboard,#path,#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#premium-track,#premium-lab,#premium-assessment,#progress,#journal,#resources,#membership,#markets,#brokers,#support,#community,#practice,#intelligence,#profile,#lab,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone).view{background-attachment:scroll} .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.journal-entry-card,.resource-feature,.plan-card,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form){background-color:rgba(9,21,36,.91)} #path .journey-current{background-color:rgba(9,21,36,.93)} #landing .landing-device-stage{animation-duration:12s} } @media(prefers-reduced-transparency:reduce){ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.resource-feature,.plan-card,.market-zone,.broker-row,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form),#path .journey-current{backdrop-filter:none!important;background-color:#0a1424} } body.low-data :is(#landing .landing-device-stage,#landing .landing-device-stage::before){animation:none!important} body.low-data .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.resource-feature,.plan-card,.market-zone,.broker-row,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form){backdrop-filter:none!important} @media(prefers-reduced-motion:reduce){ #landing .landing-device-stage,#landing .landing-device-stage::before{animation:none!important} #landing .landing-aperture,#landing .landing-device-stage,#landing .landing-device-laptop,#landing .landing-device-phone{transition:none!important} .view.active :is(.journey-current,.landing-market-card,.landing-plan-card,.plan-card,.journal-entry-card,.resource-feature,.broker-row,.community-tile,.chevron-row){transition:none!important;transform:none!important} .primary-action,.public-start,.landing-mobile-cta button{transition:none!important} } /* Landing modules echo the DDA proof-thread, not a stock four-card SaaS template. */ #landing .landing-free-grid article, #landing .product-index article, #landing .proof-practice-demo, #landing .proof-measure, #landing .landing-plan-card, #landing .landing-domain-groups article:not(.landing-market-group), #landing .landing-future-grid article, #landing .landing-market-card, #landing .product-window, #landing .experience-flow li{ border:1px solid var(--dda-aurora-edge); border-radius:14px; background:linear-gradient(145deg,rgba(18,42,69,.78),rgba(8,19,34,.88)); box-shadow:0 16px 38px rgba(0,0,0,.2),0 0 24px rgba(22,126,245,.07),inset 0 1px rgba(255,255,255,.05); } #landing .experience-flow li.is-active{border-color:rgba(65,162,255,.44);background:linear-gradient(145deg,rgba(23,71,117,.66),rgba(9,22,39,.88));box-shadow:0 0 28px rgba(24,128,244,.12),inset 0 1px rgba(255,255,255,.08)} #landing .landing-market-card{backdrop-filter:blur(8px) saturate(120%)} #landing .landing-market-card:hover,#landing .landing-market-card:focus-visible{border-color:rgba(92,184,255,.65);box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 28px rgba(22,126,245,.18),inset 0 1px rgba(255,255,255,.08)} #landing .landing-free-grid article:hover,#landing .product-index article:hover,#landing .landing-future-grid article:hover{border-color:rgba(92,184,255,.4);box-shadow:0 18px 40px rgba(0,0,0,.24),0 0 24px rgba(22,126,245,.12),inset 0 1px rgba(255,255,255,.07)} #landing .product-window{border-color:rgba(92,184,255,.3);box-shadow:0 24px 58px rgba(0,0,0,.34),0 0 36px rgba(22,126,245,.14),inset 0 1px rgba(255,255,255,.07)} @media(max-width:700px),(prefers-reduced-transparency:reduce){ #landing .landing-market-card{backdrop-filter:none;background-color:rgba(8,19,34,.92)} } @media(prefers-reduced-motion:reduce){ #landing .landing-free-grid article,#landing .product-index article,#landing .landing-future-grid article{transition:none!important} } /* Mobile sheets/tooltips use viewport-fixed positioning; glass blur would create a containing block. */ @media(max-width:700px){ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.terminal-aperture,.journal-panel,.journal-composer,.journal-entry-card,.resource-feature,.resource-reader,.landing-plan-card,.plan-card,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.support-faq-panel,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form,.landing-market-card){backdrop-filter:none!important} #path .journey-current{backdrop-filter:none!important} } body.low-data .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.terminal-aperture,.journal-panel,.journal-composer,.journal-entry-card,.resource-feature,.resource-reader,.landing-plan-card,.plan-card,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.support-faq-panel,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form,.landing-market-card){backdrop-filter:none!important} body.low-data #path .journey-current{backdrop-filter:none!important} /* Explicit pseudo-element target: conservative selector support for data-saver devices. */ body.low-data #landing .landing-device-stage{animation:none!important} body.low-data #landing .landing-device-stage::before{animation:none!important} /* ====================================================================== DDA MATERIAL PASS — institutional depth, warmer brass, restrained light. This is a surface layer only: routes, components and interaction contracts remain unchanged. ====================================================================== */ :root{ --dda-material-ink:#050b14; --dda-material-deep:#07111e; --dda-material-mid:#0b1b2d; --dda-material-blue:#2e8cff; --dda-material-cyan:#55c9d0; --dda-material-brass:#d8ae61; --dda-material-brass-soft:#f0cf8a; --dda-material-line:rgba(178,205,229,.14); --dda-material-grain:rgba(199,219,237,.035); } /* A quiet paper-like grain replaces the flat SaaS canvas without adding assets. */ :is(#landing,#access,#dashboard,#path,#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#premium-track,#premium-lab,#premium-assessment,#progress,#journal,#resources,#membership,#markets,#brokers,#support,#community,#practice,#intelligence,#profile,#lab,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone).view{ background-color:var(--dda-material-ink)!important; background-image: radial-gradient(ellipse 58% 34% at 92% 0%,rgba(46,140,255,.15),transparent 72%), radial-gradient(ellipse 44% 30% at 3% 58%,rgba(38,181,184,.085),transparent 73%), radial-gradient(ellipse 42% 28% at 78% 100%,rgba(216,174,97,.07),transparent 72%), repeating-linear-gradient(118deg,transparent 0 23px,rgba(187,214,233,.018) 24px,transparent 25px 49px), linear-gradient(135deg,var(--dda-material-ink),var(--dda-material-deep) 52%,#081525)!important; background-size:auto,auto,auto,auto,100% 100%; } /* Warm brass is reserved for trust, status, and authored progress. */ .eyebrow.gold,.brand-mark,.path-number,.lesson-index,.resource-type, .public-header-mark,.free-number,.domain-label,.future-label, #landing .method-index,#landing .landing-coming-note span{color:var(--dda-material-brass-soft)} .sidebar,.topbar,.prototype-banner,.public-header{ background-image: linear-gradient(120deg,rgba(9,24,40,.98),rgba(4,11,20,.96)), repeating-linear-gradient(135deg,transparent 0 18px,var(--dda-material-grain) 19px,transparent 20px 39px)!important; border-color:var(--dda-material-line)!important; } .sidebar{box-shadow:12px 0 40px rgba(0,0,0,.12)} .topbar,.public-header{box-shadow:0 8px 28px rgba(0,0,0,.1)} /* Shared surfaces gain a bespoke mineral/glass texture instead of a single fill. */ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.terminal-aperture,.terminal-mi,.terminal-two,.terminal-family,.journal-panel,.journal-composer,.journal-entry-card,.journal-empty,.journal-source-context,.weekly-review-evidence,.weekly-review-locked,.resource-feature,.resource-reader,.library-shelf,.landing-plan-card,.plan-card,.membership-status-line,.membership-roadmap,.membership-guardrails,.family-panel,.market-zone,.market-brief,.brvm-panel,.market-calendar,.index-card,.journal-link-block,.broker-row,.broker-empty,.broker-criteria-panel,.broker-list-panel,.support-faq-panel,.support-contact,.community-spaces,.community-featured-card,.community-tile,.community-cta,.future-principle,.intelligence-boundaries article,.premium-track-status,.premium-lab-form,.premium-assessment-form,.certificate-mock,.result-card,.principle,.example-callout,.competency-check-block,.result-stats,.mastery-row,.progress-stat,.next-step-panel,.practice-proof-row,.practice-proof-receipt,.journey-future-note,.library-entry){ border-color:rgba(101,174,232,.24); background-image: linear-gradient(145deg,rgba(17,42,68,.91),rgba(7,18,31,.95)), repeating-linear-gradient(130deg,transparent 0 17px,rgba(215,231,242,.025) 18px,transparent 19px 37px); background-blend-mode:normal,screen; box-shadow:0 22px 58px rgba(0,0,0,.24),0 0 0 1px rgba(216,174,97,.035) inset,0 1px rgba(255,255,255,.08) inset; } #landing .landing-aperture{ border-color:rgba(216,174,97,.36); background-image: linear-gradient(145deg,rgba(7,20,35,.5),rgba(7,14,25,.2)), repeating-linear-gradient(120deg,transparent 0 22px,rgba(240,207,138,.035) 23px,transparent 24px 48px); box-shadow:0 34px 92px rgba(0,0,0,.46),0 0 64px rgba(46,140,255,.14),0 0 0 1px rgba(240,207,138,.08) inset; } #landing .landing-editorial-shell{position:relative} #landing .landing-editorial-shell:before{ content:"";position:absolute;z-index:-1;top:8%;right:9%;width:28%;height:36%;pointer-events:none; background:radial-gradient(ellipse,rgba(46,140,255,.16),transparent 68%); filter:blur(18px); } #landing .landing-masthead{border-bottom-color:rgba(216,174,97,.2)} #landing .landing-actions .primary-action,#landing .landing-final-cta .primary-action,.public-start{ background:linear-gradient(112deg,#174fae 0%,#2e8cff 54%,#4cc3c4 100%); border-color:rgba(240,207,138,.42); box-shadow:0 14px 34px rgba(18,91,205,.28),0 0 24px rgba(46,140,255,.17),inset 0 1px rgba(255,255,255,.28); } #landing .landing-free-grid article,#landing .landing-domain-groups article,#landing .landing-future-grid article,#landing .landing-plan-card{ border-color:rgba(216,174,97,.2); background-image:linear-gradient(145deg,rgba(20,45,71,.72),rgba(7,18,31,.92)),repeating-linear-gradient(135deg,transparent 0 18px,rgba(240,207,138,.022) 19px,transparent 20px 40px); } #landing .landing-free-grid article:hover,#landing .landing-domain-groups article:hover,#landing .landing-future-grid article:hover,#landing .landing-plan-card:hover{border-color:rgba(240,207,138,.46)} #landing .landing-domains,#landing .landing-future,#landing .landing-free{border-top-color:rgba(216,174,97,.16)} #landing .landing-future{background-image:linear-gradient(145deg,rgba(17,40,64,.66),rgba(4,10,18,.86)),repeating-linear-gradient(118deg,transparent 0 24px,rgba(216,174,97,.025) 25px,transparent 26px 52px)} .public-footer{background-image:linear-gradient(145deg,#071321,#03070e),repeating-linear-gradient(135deg,transparent 0 18px,rgba(216,174,97,.025) 19px,transparent 20px 40px)!important} .public-footer-bottom{border-top-color:rgba(216,174,97,.18)} @media(max-width:700px){ :is(#landing,#access,#dashboard,#path,#lesson,#lesson-m02,#lesson-m03,#lesson-m11,#lesson-m12,#lesson-m13,#lesson-p21,#lesson-p22,#premium-track,#premium-lab,#premium-assessment,#progress,#journal,#resources,#membership,#markets,#brokers,#support,#community,#practice,#intelligence,#profile,#lab,#lesson-lab1,#lesson-lab2,#lesson-lab3,#lesson-lab4,#lesson-lab-capstone).view{background-attachment:scroll!important} .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.journal-entry-card,.resource-feature,.plan-card,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form){box-shadow:0 14px 32px rgba(0,0,0,.2),0 0 0 1px rgba(216,174,97,.025) inset} } @media(prefers-reduced-transparency:reduce){ .view:not(#path) :is(.panel,.access-card,.profile-panel,.preference-panel,.analysis-terminal,.terminal-lead,.journal-panel,.journal-composer,.journal-entry-card,.resource-feature,.plan-card,.market-zone,.market-brief,.brvm-panel,.market-calendar,.broker-row,.support-contact,.community-featured-card,.community-tile,.premium-track-status,.premium-lab-form,.premium-assessment-form){background-image:linear-gradient(145deg,#112a44,#07121f)!important} } /* Contract-safe base: the optical texture sits above the canonical Deep Navy canvas. */ #landing.view,#access.view,#dashboard.view,#path.view,#lesson.view,#lesson-m02.view,#lesson-m03.view,#lesson-m11.view,#lesson-m12.view,#lesson-m13.view,#lesson-p21.view,#lesson-p22.view,#premium-track.view,#premium-lab.view,#premium-assessment.view,#progress.view,#journal.view,#resources.view,#membership.view,#markets.view,#brokers.view,#support.view,#community.view,#practice.view,#intelligence.view,#lab.view,#lesson-lab1.view,#lesson-lab2.view,#lesson-lab3.view,#lesson-lab4.view,#lesson-lab-capstone.view,#profile.view{ background-color:#060d17!important; } /* Mission rails keep page purpose visible and reduce destination repetition. */ .page-mission{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 26px;padding:16px 18px;border:1px solid rgba(216,174,97,.2);border-radius:14px;background:linear-gradient(120deg,rgba(18,43,68,.78),rgba(7,17,29,.9));box-shadow:0 16px 34px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.05)} .page-mission>div{display:grid;gap:3px;min-width:0}.page-mission .eyebrow{margin:0;color:var(--dda-material-brass-soft);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase}.page-mission strong{color:#f3f6fa;font-size:.95rem}.page-mission span{color:rgba(214,226,239,.62);font-size:.78rem;line-height:1.45}.page-mission .text-action{flex:none;white-space:nowrap;color:var(--dda-material-brass-soft)} @media(max-width:700px){.page-mission{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:18px;padding:14px}.page-mission .text-action{white-space:normal;text-align:left}} /* ====================================================================== DDA INFORMATION ARCHITECTURE — explicit surface separation PUBLIC / AUTHENTICATION / LEARNER APP The hash routes remain unchanged; only their visual and semantic shells are now explicit so landing content cannot bleed into the product chrome. ====================================================================== */ .dda-surface{display:none;min-width:0;min-height:100%} .dda-surface.is-active{display:block} .dda-public-surface,.dda-auth-surface{width:100%} .dda-app-surface{width:100%;background:var(--navy-950);min-height:calc(100vh - 84px)} body.dda-app-shell main{background:var(--navy-950)} body.dda-auth-shell main{background:var(--ivory)} body.dda-auth-shell .topbar{background:rgba(247,245,240,.92);border-bottom-color:rgba(10,17,40,.12);color:var(--ink)} body.dda-auth-shell .context{color:var(--ink)} body.dda-auth-shell .network-state{color:var(--muted-2)} body.dda-auth-shell .network-state i{background:var(--teal)} body.dda-auth-shell .icon-button{color:var(--ink);border-color:rgba(10,17,40,.15)} body.dda-auth-shell .prototype-banner{background:var(--ivory);color:var(--muted-2);border-bottom-color:rgba(10,17,40,.12)} body.dda-auth-shell .mobile-nav{background:rgba(247,245,240,.96);border-top-color:rgba(10,17,40,.14)} body.dda-auth-shell .mobile-nav button{color:var(--muted-2)} body.dda-auth-shell .mobile-nav button.active{color:var(--blue)} body.dda-auth-shell .dda-auth-surface{background:var(--ivory)} body.dda-auth-shell #access{max-width:1280px;margin-inline:auto} body.dda-app-shell .dda-public-surface, body.dda-app-shell .dda-auth-surface{display:none!important} body.public-shell .dda-app-surface, body.public-shell .dda-auth-surface{display:none!important} body.public-shell main{background:transparent} body.public-shell .prototype-banner{display:none} @media(min-width:860px){ .dda-auth-surface #access{min-height:calc(100vh - 84px);display:grid;align-items:center;padding-top:34px;padding-bottom:70px} .dda-app-surface .view{max-width:1280px} } @media(max-width:859px){ .dda-app-surface{min-height:calc(100vh - 62px)} body.dda-auth-shell .topbar{height:62px} .dda-auth-surface #access{padding-top:20px;padding-bottom:86px} } #landing .public-header-nav a, #landing .public-menu-panel a, #landing .public-footer-col a, #landing .public-footer-col span { border: 0; background: none; color: var(--lp-body-soft); cursor: pointer; font: inherit; text-decoration: none; } #landing .public-header-nav a { padding: 8px 0; font-size: .76rem; font-weight: 700; white-space: nowrap; } #landing .public-header-nav a:hover, #landing .public-header-nav a:focus-visible, #landing .public-header-nav a.active { color: var(--lp-heading); } #landing .public-header-nav a.active { box-shadow: inset 0 -1px var(--gold-soft); } #landing .public-menu-panel a { padding: 10px; text-align: left; color: var(--lp-body); font-size: .78rem; } #landing .public-menu-panel a:hover, #landing .public-menu-panel a:focus-visible { color: var(--lp-heading); background: rgba(255,255,255,.05); } #landing .public-footer-col a:hover, #landing .public-footer-col a:focus-visible { color: var(--lp-heading); } #landing .landing-secondary { display: inline-flex; align-items: center; } #landing [id^="landing-"] { scroll-margin-top: 88px; } #landing .future-label { cursor: default; } @media (max-width: 1050px) { #landing .public-header-nav a { font-size: .7rem; } } @media (max-width: 820px) { #landing .public-menu-panel a { padding: 10px; } } /* ================================================================ RESPONSIVE TOUCH TARGET PASS — controls stay usable on coarse pointers Keep editorial text actions visually light while preserving a 44px interaction box on touch devices. ================================================================ */ @media (pointer: coarse), (max-width:859px){ .mobile-brand{min-width:44px;min-height:44px;justify-content:center} .text-action{display:inline-flex;align-items:center;min-height:44px} .future-label,.public-header-nav button,.public-login,.public-start,.public-menu-cta{min-height:44px} .terminal-tool,.terminal-icon-button{min-height:44px} .terminal-icon-button{min-width:44px} } @media (max-width:859px){ .text-action,.public-header-nav button,.public-header-actions button,.public-menu-panel button, .product-window-action,.public-footer-col button{height:auto;min-height:44px} #premium-lab .premium-lab-form select, #premium-lab .premium-lab-form input[type="number"]{width:100%;height:auto;min-height:48px;box-sizing:border-box} } @media (max-width:859px){ .terminal-icon-button{width:44px;height:44px;min-width:44px;min-height:44px} } @media (max-width:859px){ #dashboard .terminal-icon-button{width:44px;height:44px;min-width:44px;min-height:44px} } /* Market Intelligence is editorial context; the Terminal owns interaction. */ .terminal-mi-copy{max-width:620px;margin:6px 0 0;color:rgba(214,226,239,.66);font-size:.82rem;line-height:1.55} /* WCAG keyboard and contrast hardening — keep scrollable learning rails discoverable. */ .lesson-loop[tabindex="0"], .lesson-outline[tabindex="0"]{ scrollbar-color:rgba(224,203,155,.72) rgba(255,255,255,.06); scrollbar-width:thin; overscroll-behavior:contain; scroll-padding:12px; } .lesson-loop[tabindex="0"]:focus-visible, .lesson-outline[tabindex="0"]:focus-visible{ outline:2px solid #f3c76c; outline-offset:4px; box-shadow:0 0 0 5px rgba(243,199,108,.16); } .lesson-outline[tabindex="0"]{border-radius:12px;padding:12px 14px} .lesson-outline[tabindex="0"]:focus-visible{background:rgba(255,255,255,.035)} /* Keep small labels above the AA contrast floor on the deep-navy surfaces. */ #dashboard .terminal-mi-copy, #dashboard .terminal-thread-label, #dashboard .terminal-thread-next, #dashboard .terminal-tool-label, #dashboard .terminal-entry article p, #dashboard .terminal-lead small, #dashboard .analysis-terminal small, #premium-track .premium-track-status small, #premium-track .premium-progress-strip small, #premium-track .premium-module-rail small, #premium-lab .field-help, #premium-assessment .premium-assessment-form label{color:#b8c6d5} #access .access-card .field-help, #access .access-card .form-note, #access .access-card .field-error, #access .access-card small{color:#c3cfdb} #premium-assessment .premium-assessment-form legend{color:#edf1f6} #premium-assessment .premium-assessment-form label{color:#cbd5e1} @media(prefers-reduced-motion:reduce){ .lesson-loop[tabindex="0"],.lesson-outline[tabindex="0"]{scroll-behavior:auto} } /* Final landing hardening: opaque mobile navigation and legal documents. */ .public-menu-panel{ background:#07111f!important; border:1px solid rgba(174,191,213,.24)!important; box-shadow:0 22px 52px rgba(0,0,0,.42); backdrop-filter:none!important; } .public-menu-panel a,.public-menu-panel .public-menu-cta{letter-spacing:.01em} .public-menu summary[aria-expanded="true"] span{display:inline-block;transform:rotate(45deg)} .legal-link{display:block;width:100%;padding:5px 0;border:0;background:transparent;color:#cbd5e1;text-align:left;font:inherit;cursor:pointer} .legal-link:hover,.legal-link:focus-visible{color:#f3c76c} .legal-dialog{width:min(720px,calc(100vw - 28px));max-height:min(84dvh,760px);padding:0;border:1px solid rgba(95,182,255,.36);border-radius:16px;background:#091523;color:#edf1f6;box-shadow:0 28px 90px rgba(0,0,0,.56)} .legal-dialog::backdrop{background:rgba(3,8,15,.78);backdrop-filter:blur(4px)} .legal-dialog-card{position:relative;padding:clamp(24px,5vw,42px);overflow:auto;max-height:min(84dvh,760px)} .legal-dialog-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid rgba(174,191,213,.24);border-radius:10px;background:#101c2d;color:#edf1f6;font-size:25px;line-height:1;cursor:pointer} .legal-dialog h2{max-width:16ch;margin:8px 44px 24px 0;color:#f3f6fa;font-size:clamp(1.8rem,4vw,2.8rem)} .legal-dialog-content{color:#cbd5e1;line-height:1.72} .legal-dialog-content h3{margin:24px 0 6px;color:#f3c76c;font-size:1rem} .legal-dialog-content p{margin:0 0 12px} .legal-dialog-note{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(174,191,213,.16);color:#aebdcd;font-size:.82rem;line-height:1.55} @media(max-width:639px){.legal-dialog{width:calc(100vw - 20px);max-height:88dvh}.legal-dialog-card{padding:24px 18px 28px}.public-menu-panel{right:12px;left:12px}} /* Public information surfaces: substantive, readable and separate from Academy routes. */ .public-doc-link{display:block;width:100%;padding:0;border:0;background:none;color:var(--lp-body-soft);text-align:left;font:inherit;cursor:pointer} .public-doc-link:hover,.public-doc-link:focus-visible{color:var(--lp-heading)} .public-info-dialog .legal-dialog-content{max-width:66ch} .public-info-content .public-doc-lead{margin:0 0 20px;color:#f3f6fa;font-size:1.05rem;line-height:1.65} .public-doc-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:12px;border:1px solid rgba(174,191,213,.16);background:rgba(255,255,255,.035)} .public-doc-index a{padding:7px 9px;color:#f3c76c;font-size:.78rem;text-decoration:none} .public-doc-index a:hover,.public-doc-index a:focus-visible{color:#fff;background:rgba(240,199,108,.1)} .public-info-content h3{scroll-margin-top:20px} .public-info-content code{padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.08);color:#f3c76c;font-size:.9em} @media(max-width:639px){.public-doc-index{display:grid;grid-template-columns:1fr 1fr;gap:4px}.public-doc-index a{min-height:40px;display:flex;align-items:center}.public-info-content .public-doc-lead{font-size:1rem}} /* DDA MOTION SYSTEM — institutional conversion layer. Motion is used to establish hierarchy, attention and product credibility; it never carries essential meaning and is disabled for reduced-motion users. */ #landing{ --motion-ease:cubic-bezier(.22,.61,.36,1); --motion-spring:cubic-bezier(.16,1,.3,1); } #landing .public-header{isolation:isolate} #landing .public-header::after{ content:"";position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,154,69,.44) 18%,rgba(93,167,238,.34) 58%,transparent); transform-origin:left center;animation:dda-header-line 1.4s var(--motion-ease) both; } #landing .landing-main-copy .landing-masthead{animation:dda-copy-rise .8s var(--motion-ease) .08s both} #landing .landing-main-copy h1{text-wrap:balance;animation:dda-copy-rise .9s var(--motion-ease) .16s both} #landing .landing-main-copy .landing-deck{animation:dda-copy-rise .8s var(--motion-ease) .28s both} #landing .landing-actions,#landing .landing-trust{animation:dda-copy-rise .75s var(--motion-ease) .38s both} #landing .primary-action,#landing .public-start,#landing .landing-mobile-cta button{ position:relative;overflow:hidden;transition:transform .28s var(--motion-spring),box-shadow .28s var(--motion-ease),background-color .28s ease; } #landing .primary-action::after,#landing .public-start::after,#landing .landing-mobile-cta button::after{ content:"";position:absolute;top:-20%;bottom:-20%;left:-42%;width:28%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg); transition:left .62s var(--motion-ease);pointer-events:none; } #landing .primary-action:hover,#landing .primary-action:focus-visible,#landing .public-start:hover,#landing .public-start:focus-visible,#landing .landing-mobile-cta button:hover,#landing .landing-mobile-cta button:focus-visible{ transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,79,176,.24),0 0 0 1px rgba(227,194,127,.16); } #landing .primary-action:hover::after,#landing .primary-action:focus-visible::after,#landing .public-start:hover::after,#landing .public-start:focus-visible::after,#landing .landing-mobile-cta button:hover::after,#landing .landing-mobile-cta button:focus-visible::after{left:125%} #landing .landing-aperture{animation:dda-aperture-in 1.1s var(--motion-spring) .12s both} #landing .landing-aperture::before{ content:"";position:absolute;inset:8%;border:1px solid rgba(201,154,69,.14);border-radius:50%;box-shadow:0 0 80px rgba(45,116,214,.1); animation:dda-aperture-pulse 6s ease-in-out infinite;pointer-events:none; } #landing .landing-device-stage{animation:dda-aperture-float 7s ease-in-out -1.5s infinite} #landing .landing-3d-scene{animation:dda-scene-breathe 8s ease-in-out infinite} #landing .landing-signal span{animation:dda-signal-pulse 3.4s ease-in-out infinite} #landing .experience-flow li,#landing .landing-market-card,#landing .landing-plan-card,#landing .landing-future-grid article,#landing .proof-practice-demo,#landing .proof-measure{ transition:transform .35s var(--motion-spring),border-color .35s ease,background-color .35s ease,box-shadow .35s ease; } #landing .experience-flow li:hover,#landing .landing-market-card:hover,#landing .landing-plan-card:hover,#landing .landing-future-grid article:hover,#landing .proof-practice-demo:hover,#landing .proof-measure:hover{ transform:translateY(-4px);border-color:rgba(201,154,69,.42);box-shadow:0 18px 42px rgba(2,9,18,.18); } #landing .landing-section-head h2,#landing .landing-final-cta h2{text-wrap:balance} @keyframes dda-header-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} @keyframes dda-copy-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes dda-aperture-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes dda-aperture-pulse{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.78;transform:scale(1.02)}} @keyframes dda-device-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}} @keyframes dda-scene-breathe{0%,100%{filter:brightness(.96)}50%{filter:brightness(1.06)}} @keyframes dda-signal-pulse{0%,100%{opacity:.36}50%{opacity:.92}} @media(max-width:639px){ #landing .public-header::after{left:16px;right:16px} #landing .landing-aperture::before{inset:4%;opacity:.7} #landing .landing-device-stage{animation-duration:9s} } @media(prefers-reduced-motion:reduce){ #landing .public-header::after,#landing .landing-main-copy .landing-masthead,#landing .landing-main-copy h1,#landing .landing-main-copy .landing-deck,#landing .landing-actions,#landing .landing-trust,#landing .landing-aperture,#landing .landing-aperture::before,#landing .landing-device-stage,#landing .landing-3d-scene,#landing .landing-signal span{animation:none!important} #landing .experience-flow li:hover,#landing .landing-market-card:hover,#landing .landing-plan-card:hover,#landing .landing-future-grid article:hover,#landing .proof-practice-demo:hover,#landing .proof-measure:hover,#landing .primary-action:hover,#landing .primary-action:focus-visible,#landing .public-start:hover,#landing .public-start:focus-visible,#landing .landing-mobile-cta button:hover,#landing .landing-mobile-cta button:focus-visible{transform:none;box-shadow:none} } /* Micro viewport conversion hardening: keep the first meaningful action in view. */ @media(max-width:320px){ #landing .landing-editorial-shell{padding-top:18px;gap:16px} #landing .landing-main-copy .landing-masthead{margin-bottom:10px;font-size:.58rem;line-height:1.35} #landing h1{font-size:clamp(2.25rem,12vw,2.7rem);line-height:.92;margin-bottom:14px} #landing .landing-deck{font-size:.88rem;line-height:1.48;margin-bottom:14px} #landing .landing-actions{gap:10px} #landing .landing-actions .primary-action{min-height:44px;padding:10px 12px;font-size:.78rem} #landing .landing-secondary{font-size:.74rem} #landing .landing-trust{margin-top:14px} } /* Fold / short landscape: preserve the acquisition action above the fold. */ @media (max-width:899px) and (max-height:600px){ #landing .landing-editorial-shell{padding-top:20px;gap:18px} #landing .landing-main-copy h1{font-size:clamp(2.35rem,6.4vw,3.65rem);line-height:.9} #landing .landing-deck{max-width:54ch;font-size:.92rem;line-height:1.48;margin-bottom:12px} #landing .landing-trust{margin-top:14px} } @media (max-width:899px) and (max-height:600px){ #landing .landing-main-copy .landing-masthead{margin-bottom:8px} #landing .landing-main-copy h1{font-size:clamp(2rem,5.6vw,3.15rem);line-height:.86;margin-bottom:10px} #landing .landing-deck{font-size:.84rem;line-height:1.34;margin-bottom:8px} #landing .landing-actions{gap:8px} #landing .landing-actions .primary-action{min-height:46px;padding:9px 14px} #landing .landing-trust{margin-top:9px} } /* DDA MARKET HOUSE — reference-inspired conversion layer. Uses the reference's information rhythm without copying its brand, copy or imagery. */ #landing .public-utility-bar{ display:flex;align-items:center;gap:22px;min-height:30px;padding:0 clamp(20px,5vw,72px); border-bottom:1px solid rgba(174,191,213,.09);background:#040a12;color:#8291a3; font-size:.62rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden; } #landing .public-utility-bar>span{display:inline-flex;align-items:center;gap:6px} #landing .public-utility-bar .utility-market b{color:#c9d3de;font-weight:800} #landing .public-utility-bar .utility-market em{color:#80c99b;font-style:normal} #landing .public-utility-bar .utility-help{margin-left:auto;gap:15px} #landing .public-utility-bar a{color:#c4ced9;text-decoration:none} #landing .public-utility-bar a:hover{color:#9ce59d} #landing .utility-pulse{width:6px;height:6px;border-radius:50%;background:#80c99b;box-shadow:0 0 0 4px rgba(128,201,155,.12)} #landing .public-header{background:rgba(6,13,23,.72);backdrop-filter:blur(16px)} #landing .public-header-brand .public-header-mark{border-color:#83d18b;color:#9ce59d;box-shadow:inset 0 -8px 15px rgba(91,183,108,.08)} #landing .public-start{background:linear-gradient(135deg,#77c96e,#a4e48e)!important;color:#07130e!important;box-shadow:0 8px 24px rgba(88,183,91,.18)} #landing .public-start span{color:#183c22} #landing .landing-trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--lp-line);background:#07111e} #landing .landing-trust-strip article{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:20px 18px 20px 0;border-right:1px solid var(--lp-line)} #landing .landing-trust-strip article+article{padding-left:18px} #landing .landing-trust-strip article:last-child{border-right:0} #landing .trust-strip-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid rgba(128,201,155,.48);border-radius:50%;color:#9ce59d;font-size:1rem;line-height:1} #landing .landing-trust-strip strong{display:block;color:#e9eef3;font-size:.78rem;line-height:1.25} #landing .landing-trust-strip small{display:block;margin-top:5px;color:#8999ab;font-size:.68rem;line-height:1.45} #landing .landing-market-strip{max-width:1200px;margin:0 auto;padding:22px clamp(20px,5vw,72px) 28px;border-bottom:1px solid var(--lp-line);background:#07111e} #landing .market-strip-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;color:#c9b27b;font-size:.66rem;font-weight:800;letter-spacing:.13em} #landing .market-strip-heading a{color:#9ce59d;font-size:.68rem;letter-spacing:0;text-decoration:none} #landing .market-strip-heading b{padding-left:6px} #landing .market-strip-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #landing .market-strip-grid article{position:relative;overflow:hidden;min-height:100px;padding:13px 12px 11px;border:1px solid rgba(174,191,213,.13);border-radius:7px;background:linear-gradient(150deg,#101d2d,#09131f);box-shadow:inset 0 1px rgba(255,255,255,.03)} #landing .market-strip-grid article>span{display:block;color:#9baabc;font-size:.56rem;letter-spacing:.09em;font-weight:800} #landing .market-strip-grid strong{display:block;margin-top:12px;color:#eef2f4;font-size:.78rem} #landing .market-strip-grid small{display:block;margin-top:8px;color:#7f92a6;font-size:.57rem} #landing .strip-spark{position:absolute;right:9px;bottom:13px;width:58px;height:20px;border-bottom:1px solid rgba(137,207,153,.62);transform:skewY(-18deg) rotate(-8deg);opacity:.7} #landing .strip-spark:before{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,transparent,#8fd796 20%,#79bd85 52%,transparent 100%);box-shadow:12px -7px 0 -0.2px #9ce59d,25px -2px 0 -0.2px #9ce59d,39px -11px 0 -0.2px #9ce59d,53px -5px 0 -0.2px #9ce59d} #landing .spark-b,#landing .spark-d{border-color:rgba(203,121,132,.65)} #landing .spark-b:before,#landing .spark-d:before{background:linear-gradient(90deg,transparent,#d88591 30%,#bb6874 70%,transparent 100%);box-shadow:12px 4px 0 -0.2px #d88591,25px -6px 0 -0.2px #d88591,39px 2px 0 -0.2px #d88591,53px -9px 0 -0.2px #d88591} #landing .landing-aperture{border-color:rgba(128,201,155,.3);background:radial-gradient(ellipse at 76% 22%,rgba(92,192,111,.14),transparent 34%),linear-gradient(145deg,#06121d 0%,#0a1e2c 68%,#123521 145%)} #landing .landing-aperture:after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(180deg,transparent,rgba(54,124,76,.16));pointer-events:none} #landing .landing-aperture .landing-device-stage{filter:drop-shadow(0 22px 26px rgba(0,0,0,.32))} #landing .landing-3d-core{border-color:rgba(156,229,157,.82);background:radial-gradient(circle at 34% 28%,rgba(128,201,155,.3),rgba(7,18,33,.94) 62%);box-shadow:0 0 0 12px rgba(128,201,155,.06),0 18px 55px rgba(0,0,0,.36),inset 0 0 28px rgba(255,255,255,.08)} #landing .landing-3d-orbit{border-color:rgba(128,201,155,.34)} #landing .landing-3d-orbit i{background:#9ce59d;box-shadow:0 0 0 5px rgba(156,229,157,.1),0 0 24px rgba(156,229,157,.72)} #landing .landing-3d-node{border-color:rgba(128,201,155,.42);color:#b7e8bb} #landing .landing-philosophy-band{background:linear-gradient(110deg,#0a1826,#07111e 60%,#0e281a)} #landing .landing-philosophy-band .differentiation-statement em{color:#9ce59d} #landing .landing-final-cta{background:radial-gradient(circle at 70% 0%,rgba(74,161,84,.2),transparent 38%),#07111e} @media(max-width:899px){ #landing .landing-trust-strip{grid-template-columns:1fr 1fr;gap:0} #landing .landing-trust-strip article:nth-child(2){border-right:0} #landing .landing-trust-strip article:nth-child(n+3){border-top:1px solid var(--lp-line)} #landing .landing-market-strip{padding-top:18px} #landing .market-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #landing .market-strip-grid article:last-child{grid-column:1/-1} } @media(max-width:639px){ #landing .public-utility-bar{gap:15px;padding-inline:16px;font-size:.57rem} #landing .public-utility-bar .utility-market:nth-of-type(3){display:none} #landing .public-utility-bar .utility-help{display:none} #landing .landing-trust-strip{grid-template-columns:1fr;padding-inline:16px} #landing .landing-trust-strip article,#landing .landing-trust-strip article+article{padding:14px 0;border-right:0;border-top:1px solid var(--lp-line)} #landing .landing-trust-strip article:first-child{border-top:0} #landing .market-strip-grid{grid-template-columns:1fr 1fr} #landing .market-strip-grid article{min-height:94px} } @media(prefers-reduced-motion:reduce){#landing .landing-3d-scene{animation:none}} /* Reveal hardening: section shells stay visible; only their child surfaces animate. */ #landing .landing-experience,#landing .landing-product,#landing .landing-proof,#landing .landing-ecosystem,#landing .landing-future,#landing .landing-guardrails{opacity:1;transform:none} /* Mobile hero proportion — the first conversion decision must arrive before the sticky CTA interval. */ @media(max-width:639px){ #landing .landing-editorial-shell{padding-top:22px;gap:18px} #landing .landing-masthead{margin-bottom:18px} #landing h1{font-size:clamp(2.55rem,11.2vw,3.35rem);line-height:.96;margin-bottom:14px} #landing .landing-deck{font-size:.9rem;line-height:1.5;margin-bottom:10px} #landing .landing-actions{margin-top:18px;margin-bottom:14px;gap:10px} #landing .landing-trust{grid-template-columns:1fr 1fr;gap:7px;margin-top:14px} #landing .landing-trust li{min-height:52px;padding:8px 9px;font-size:.68rem} #landing .landing-aperture{min-height:280px;padding:18px} #landing .landing-device-stage{inset:15% 4% 20%} #landing .landing-phone-screen{min-height:132px;padding-top:16px} } /* DDA acquisition hero — match the reference rhythm: hero, proof rail, markets. */ @media(min-width:900px){ #landing .landing-editorial-shell{min-height:560px;padding-top:34px;padding-bottom:30px;align-items:center} #landing .landing-masthead{margin-bottom:34px} #landing .landing-aperture{min-height:438px;margin-top:0} #landing .landing-main-copy{align-self:center} #landing .landing-trust-strip{margin-top:0} } @media(min-width:900px) and (max-height:820px){ #landing .landing-editorial-shell{min-height:520px;padding-top:24px;padding-bottom:24px} #landing .landing-aperture{min-height:392px} #landing h1{font-size:clamp(3.3rem,6vw,5.4rem)} } /* Short landscape devices: keep the acquisition decision in the first viewport. */ @media (max-width:899px) and (max-height:600px){ #landing .landing-editorial-shell{grid-template-columns:minmax(0,1.08fr) minmax(180px,.82fr);gap:18px;min-height:292px;padding-top:16px;padding-bottom:18px;align-items:center} #landing .landing-main-copy{grid-column:1;grid-row:1} #landing .landing-aperture{grid-column:2;grid-row:1;min-height:230px;padding:14px} #landing .landing-masthead{margin-bottom:12px;font-size:.56rem} #landing .landing-main-copy h1{font-size:clamp(2rem,6vw,3.15rem);line-height:.88;margin-bottom:8px} #landing .landing-deck{font-size:.75rem;line-height:1.35;margin-bottom:8px;max-width:42ch} #landing .landing-actions{margin-top:8px;gap:7px} #landing .landing-actions .primary-action{min-height:40px;padding:8px 11px;font-size:.68rem} #landing .landing-secondary{font-size:.68rem} #landing .landing-trust{display:none} #landing .landing-device-stage{inset:15% 2% 18%} #landing .landing-phone-screen{min-height:110px} } @media (min-width:500px) and (max-width:899px) and (max-height:360px){ #landing .landing-editorial-shell{min-height:168px;padding-top:12px;padding-bottom:12px;gap:14px} #landing .landing-masthead,#landing .landing-deck,#landing .landing-trust{display:none} #landing .landing-main-copy h1{font-size:clamp(1.8rem,5vw,2.5rem);line-height:.86;margin:0 0 8px} #landing .landing-actions{margin:0;gap:8px} #landing .landing-actions .primary-action{min-height:38px;padding:7px 11px;font-size:.66rem} #landing .landing-secondary{font-size:.66rem} #landing .landing-aperture{min-height:168px} } @media (min-width:500px) and (max-width:899px) and (max-height:360px){ #landing .landing-editorial-shell{min-height:154px;padding-top:8px;padding-bottom:8px} #landing .landing-main-copy h1{font-size:clamp(1.7rem,4.7vw,2.25rem);margin-bottom:5px} } /* Site completion pass — official support channels and Journal focus. */ #support .support-official-channels{margin-top:18px;padding:clamp(22px,4vw,34px);border:1px solid var(--dda-elite-line);border-radius:14px;background:linear-gradient(145deg,rgba(16,42,68,.92),rgba(8,19,34,.96));color:var(--dda-elite-ink);box-shadow:0 18px 44px rgba(0,0,0,.2)} #support .support-official-channels h2{margin:.35rem 0 .55rem;color:#f3f6f8;font-family:var(--dda-serif);font-size:clamp(1.7rem,3vw,2.5rem)} #support .support-official-channels p:not(.eyebrow){max-width:660px;color:#aeb9c6;line-height:1.65} .support-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px} .support-channel-card{display:grid;gap:7px;min-height:130px;padding:18px;border:1px solid var(--dda-elite-line);border-radius:12px;background:rgba(255,255,255,.035);color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease} .support-channel-card:hover,.support-channel-card:focus-visible{transform:translateY(-2px);border-color:rgba(203,177,116,.55);background:rgba(203,177,116,.08)} .support-channel-card strong{color:var(--dda-elite-gold-soft);font-size:1.05rem} .support-channel-card span{color:#d4dde6;font-size:.85rem;line-height:1.45} .support-channel-card small{margin-top:auto;color:#9fadb9;font-size:.72rem} #journal .journal-toolbar{padding:14px 16px;border:1px solid var(--dda-elite-line);border-radius:14px;background:rgba(255,255,255,.035)} #journal .journal-entry-card{border:1px solid var(--dda-elite-line);border-radius:14px;background:linear-gradient(150deg,#101c2d,#0a1424);box-shadow:0 10px 28px -22px rgba(0,0,0,.5)} #journal .journal-composer{border:1px solid var(--dda-elite-line);border-radius:16px;background:linear-gradient(150deg,#101c2d,#0a1424);padding:20px} .guided-fallback{background:radial-gradient(circle at 50% 15%,#1c2f57,#070c17 68%)} @media(max-width:700px){ .support-channel-grid{grid-template-columns:1fr} #support .support-official-channels{padding:20px 16px} .support-channel-card{min-height:0} } /* Premium value layer — depth over Free without invented claims. */ #premium-track .premium-value-grid{display:grid;gap:22px;margin:24px 0} #premium-track .premium-value-heading{max-width:760px} #premium-track .premium-value-heading h2{margin:.35rem 0 .55rem;color:#f3f6f8;font-family:var(--dda-serif);font-size:clamp(1.8rem,3.8vw,3.2rem);line-height:1.05} #premium-track .premium-value-heading p:not(.eyebrow){color:#b7c5d4;line-height:1.7;max-width:680px} #premium-track .premium-value-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #premium-track .premium-value-card{display:flex;flex-direction:column;gap:9px;min-height:190px;padding:20px;border:1px solid rgba(216,174,97,.2);border-radius:14px;background:linear-gradient(145deg,rgba(22,52,83,.9),rgba(7,18,31,.96));box-shadow:0 18px 42px rgba(0,0,0,.2)} #premium-track .premium-value-number{color:var(--dda-material-brass-soft);font-size:.7rem;letter-spacing:.16em;font-weight:800} #premium-track .premium-value-card h3{margin:0;color:#f2f5f8;font-size:1.18rem} #premium-track .premium-value-card p{margin:0;color:#b7c5d4;font-size:.88rem;line-height:1.55} #premium-track .premium-value-card .text-action{margin-top:auto;align-self:flex-start;color:var(--dda-material-brass-soft)} #premium-track .premium-deliverables{margin-top:18px} #premium-track .premium-deliverable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #premium-track .premium-deliverable-grid article{display:grid;gap:8px;padding:17px;border:1px solid rgba(101,174,232,.24);border-radius:12px;background:rgba(6,16,28,.58)} #premium-track .premium-deliverable-grid strong{color:#f3f6f8} #premium-track .premium-deliverable-grid span{color:#b7c5d4;font-size:.84rem;line-height:1.5} @media(max-width:820px){#premium-track .premium-value-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#premium-track .premium-deliverable-grid{grid-template-columns:1fr}} @media(max-width:520px){#premium-track .premium-value-cards{grid-template-columns:1fr}#premium-track .premium-value-card{min-height:0}} /* ====================================================================== BRVM INFORMATION DESK — factual, dated, and intentionally not a quote feed ====================================================================== */ #markets .brvm-information-desk{display:grid;gap:16px;margin-top:18px} #markets .brvm-desk-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px} #markets .brvm-desk-heading h2{margin:4px 0 0;max-width:18ch} #markets .brvm-status-badge{color:#f1d38c;border-color:rgba(217,164,65,.34)} #markets .brvm-provenance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035)} #markets .brvm-provenance div{display:grid;gap:5px;min-width:0} #markets .brvm-provenance dt{color:rgba(244,247,252,.5);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase} #markets .brvm-provenance dd{margin:0;color:#f4f7fc;font-size:12px;line-height:1.4} #markets .brvm-information-desk h3{margin:4px 0 0;color:#f4f7fc;font-size:15px} #markets .brvm-source-row{align-items:center} #markets .brvm-source-row small{max-width:680px;line-height:1.45} #markets .brvm-source-link{color:#f1d38c;text-decoration:none;transition:border-color .2s ease,background .2s ease} #markets .brvm-source-link:hover,#markets .brvm-source-link:focus-visible{border-color:#d9a441;background:rgba(217,164,65,.12)} #markets .brvm-source-empty{justify-content:flex-start} #markets .brvm-scope-panel{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;margin-top:18px;padding:24px;border:1px solid rgba(84,197,232,.22);border-radius:2px 18px 2px 18px;background:linear-gradient(135deg,rgba(84,197,232,.08),rgba(255,255,255,.025))} #markets .brvm-scope-panel h2{margin:4px 0 10px;color:#fff;font-family:var(--dda-serif);font-size:clamp(1.5rem,3vw,2.3rem);font-weight:400} #markets .brvm-scope-panel p:not(.eyebrow){color:rgba(244,247,252,.68);font-size:13px;line-height:1.6} #markets .brvm-scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} #markets .brvm-scope-grid article{display:grid;gap:4px;padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.035)} #markets .brvm-scope-grid strong{color:#f1d38c;font-size:11px;letter-spacing:.08em} #markets .brvm-scope-grid span{color:#f4f7fc;font-size:13px;font-weight:750} #markets .brvm-scope-grid small{color:rgba(244,247,252,.52);font-size:11px;line-height:1.35} @media(max-width:720px){ #markets .brvm-desk-heading{display:grid;gap:10px} #markets .brvm-provenance{grid-template-columns:1fr} #markets .brvm-scope-panel{grid-template-columns:1fr;padding:18px} #markets .brvm-source-row{align-items:flex-start;flex-direction:column} #markets .brvm-source-link{width:fit-content} }