/* FLUENSTRA APPEARANCE, the light side --------------------------------------------------------------------------- Every page keeps its own dark stylesheet exactly as it was. This file only adds what changes when is set by theme.js. Two kinds of rule live here: 1. The colour variables every page already uses, redefined for light. That alone flips most of each page. 2. The handful of places where a page used a fixed dark colour instead of a variable. Those are listed per page, scoped by data-page, so a rule for one page can never leak into another. Light palette. Raspberry stays raspberry. Text accents use the deep raspberry #B11452 (6.9:1 on white) because the bright one used on dark, #F04C8A, does not have enough contrast against white for text. */ /* ═══ 1. THE SWITCH ITSELF, same on every page ═══ */ .theme-toggle{ flex:none; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid var(--border, #2A2A33); color:var(--text-2, var(--text2, #A8A8B5)); cursor:pointer; padding:0; line-height:0; font:inherit; transition:border-color .25s, color .25s, background .25s; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover{ border-color:var(--rasp-hi, var(--rasp4, #F04C8A)); color:var(--text, #F6F6F7); } .theme-toggle:focus-visible{ outline:2px solid var(--rasp-hi, #F04C8A); outline-offset:2px; } .theme-toggle svg{ display:block; } @media(max-width:620px){ .theme-toggle{ width:30px; height:30px; } .theme-toggle svg{ width:15px; height:15px; } } /* The labelled version on the Profile page. */ .theme-seg{ display:flex; gap:8px; } .theme-pick{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-radius:11px; border:1px solid var(--border); background:var(--card-2, transparent); color:var(--text-2); font:inherit; font-size:14px; cursor:pointer; transition:border-color .25s, color .25s, background .25s; } .theme-pick:hover{ border-color:var(--rasp-hi); color:var(--text); } .theme-pick.on{ border-color:var(--rasp-hi); color:var(--text); background:rgba(177,20,82,.10); font-weight:600; } .theme-pick svg{ width:16px; height:16px; } /* ═══ 2. VARIABLES, every name used on any page ═══ */ html[data-theme="light"]{ color-scheme:light; /* dashboard, maya, community, profile, login */ --bg:#F5F5F8; --bg-2:#FFFFFF; --card:#FFFFFF; --card-2:#F2F2F6; --border:#E3E3EA; --text:#141419; --text-2:#55556A; --text-3:#6A6A79; /* 4.9:1 on the page, 5.3:1 on a card */ --rasp:#B11452; --rasp-hi:#B11452; --green:#1F9E6C; --amber:#B57200; /* app.html */ /* In the app, --bg2 is a raised card and --surface is an inset panel or a progress track sitting inside that card. On dark they are two different greys. On white the card is white and the inset must be a soft grey, or quote boxes, progress tracks and inputs disappear into the card. */ --bg2:#FFFFFF; --surface:#F1F1F6; --text2:#55556A; --muted:#6A6A79; --rasp1:#8C0D46; --rasp2:#B11452; --rasp3:#B11452; --rasp4:#B11452; --glow:#B11452; /* index, about, faq, privacy, terms */ --maxw-unused:0; } html[data-theme="light"] body{ background:var(--bg); color:var(--text); } html[data-theme="light"] .theme-toggle{ background:#FFFFFF; } /* Ambient raspberry glows are far too strong on white. Keep a whisper. */ html[data-theme="light"] body::before{ opacity:.35; } /* Selection colour on light */ html[data-theme="light"] ::selection{ background:rgba(177,20,82,.18); } /* ═══ 3. SHARED PIECES that several pages build the same way ═══ */ /* sticky top bars */ html[data-theme="light"] .top, html[data-theme="light"] .nav, html[data-theme="light"] .topbar{ background:rgba(255,255,255,.86); } html[data-theme="light"] .nav.stuck{ background:#FFFFFF; border-bottom-color:#E3E3EA; } /* subtle "white at 4%" fills become "black at 4%" */ html[data-theme="light"] .help-btn, html[data-theme="light"] .btn-secondary, html[data-theme="light"] .q-back, html[data-theme="light"] .tutor-book-btn, html[data-theme="light"] .rp-listen, html[data-theme="light"] .done-btn, html[data-theme="light"] .pc-btn.pc-ghost, html[data-theme="light"] .btn-ghost{ background:rgba(0,0,0,.04); } html[data-theme="light"] .help-btn:hover, html[data-theme="light"] .btn-secondary:hover, html[data-theme="light"] .q-back:hover, html[data-theme="light"] .done-btn:hover, html[data-theme="light"] .btn-ghost:hover{ background:rgba(0,0,0,.08); } html[data-theme="light"] .btn-ghost:hover{ border-color:#C9C9D2; } /* inputs that were hard coded to the dark page colour */ html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select, html[data-theme="light"] .f-row input, html[data-theme="light"] .f-row textarea, html[data-theme="light"] .maya-in input{ background:#F5F5F8; color:var(--text); } html[data-theme="light"] .f-row input:focus, html[data-theme="light"] .f-row textarea:focus{ background:#FFFFFF; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder{ color:#9A9AAA; } /* switches */ html[data-theme="light"] .switch{ background:#D5D5DE; } html[data-theme="light"] .switch.on{ background:rgba(177,20,82,.55); } /* error, ok and info message tints. The pale pink text used on dark is unreadable on white, so these get real colours. */ html[data-theme="light"] .msg.err, html[data-theme="light"] .rep-reason{ background:rgba(220,55,80,.08); border-color:rgba(220,55,80,.35); color:#B4233A; } html[data-theme="light"] .msg.ok{ background:rgba(31,158,108,.10); border-color:rgba(31,158,108,.35); color:#177A53; } html[data-theme="light"] .msg.info{ background:rgba(177,20,82,.07); border-color:rgba(177,20,82,.28); color:#8C0D46; } html[data-theme="light"] .hint.err, html[data-theme="light"] .comp-msg.err, html[data-theme="light"] .dlg-msg.err, html[data-theme="light"] .savemsg.err, html[data-theme="light"] .practise-note.err, html[data-theme="light"] .field .help.warn, html[data-theme="light"] .swap-r .said{ color:#B4233A; } html[data-theme="light"] .mini.danger:hover, html[data-theme="light"] .forget:hover{ border-color:#D9455F; color:#B4233A; } html[data-theme="light"] .th-x:hover, html[data-theme="light"] .fact-x:hover, html[data-theme="light"] .preview-strip button:hover, html[data-theme="light"] .img-strip button:hover, html[data-theme="light"] .chal-mode button:hover{ color:#B11452; } /* scrollbars */ html[data-theme="light"] ::-webkit-scrollbar-thumb, html[data-theme="light"] .threads::-webkit-scrollbar-thumb, html[data-theme="light"] .log::-webkit-scrollbar-thumb, html[data-theme="light"] .brain-body::-webkit-scrollbar-thumb, html[data-theme="light"] .maya-log::-webkit-scrollbar-thumb{ background:#CFCFD8; } /* raised heavy shadows lighten */ html[data-theme="light"] .card, html[data-theme="light"] .q-card, html[data-theme="light"] .lock-modal, html[data-theme="light"] .maya, html[data-theme="light"] .report, html[data-theme="light"] .tcard, html[data-theme="light"] .price, html[data-theme="light"] .form-card, html[data-theme="light"] .ch-panel{ box-shadow:0 18px 50px rgba(20,20,40,.12); } /* ═══ 4. DASHBOARD ═══ */ html[data-theme="light"][data-page="dashboard"] .ring-bg{ stroke:#E6E6EE; } html[data-theme="light"][data-page="dashboard"] .cta.off, html[data-theme="light"][data-page="dashboard"] .pip{ background:#D9D9E2; } html[data-theme="light"][data-page="dashboard"] .bar-t{ background:#E6E6EE; } html[data-theme="light"][data-page="dashboard"] .rep:hover{ border-color:#C9C9D2; } /* ═══ 5. PROFILE ═══ */ html[data-theme="light"][data-page="profile"] .pv-av.anon{ background:#E6E6EE; } html[data-theme="light"][data-page="profile"] .savebar{ background:rgba(255,255,255,.94); } /* ═══ 6. MAYA ═══ */ html[data-theme="light"][data-page="maya"] .bub img.shot{ border-color:rgba(0,0,0,.10); } html[data-theme="light"][data-page="maya"] .bub.me img.shot{ border-color:rgba(255,255,255,.35); } html[data-theme="light"][data-page="maya"] .side-back, html[data-theme="light"][data-page="maya"] .brain-back{ background:rgba(20,20,30,.35); } /* ═══ 7. COMMUNITY ═══ */ html[data-theme="light"][data-page="community"] .quiz{ background:#FFF4F8; } html[data-theme="light"][data-page="community"] .p-av.anon{ background:#E6E6EE; } html[data-theme="light"][data-page="community"] .p-av.seed{ background:#FBE5EE; } html[data-theme="light"][data-page="community"] .p-img{ border-color:rgba(0,0,0,.10); } html[data-theme="light"][data-page="community"] .act:hover{ background:rgba(0,0,0,.04); } html[data-theme="light"][data-page="community"] .post:hover{ border-color:#C9C9D2; } html[data-theme="light"][data-page="community"] .reply + .reply{ border-top-color:#E3E3EA; } html[data-theme="light"][data-page="community"] .dlg-back, html[data-theme="light"][data-page="community"] .mod-back{ background:rgba(20,20,30,.40); } html[data-theme="light"][data-page="community"] .quiz-opt.right .k, html[data-theme="light"][data-page="community"] .quiz-opt.wrong .k{ color:#FFFFFF; } /* ═══ 8. LOGIN ═══ */ html[data-theme="light"][data-page="login"] .field .hint{ color:#7E7E8E; } /* ═══ 9. MARKETING SUBPAGES: about, faq, privacy, terms ═══ */ html[data-theme="light"][data-page="page"] footer{ background:#EEEEF3; } html[data-theme="light"][data-page="page"] .toc a{ border-bottom-color:rgba(0,0,0,.05); } html[data-theme="light"][data-page="page"] .callout{ background:rgba(177,20,82,.06); } html[data-theme="light"][data-page="page"] .f-soc:hover{ background:rgba(177,20,82,.10); } /* ═══ 10. HOMEPAGE ═══ The homepage is a cinematic dark page with many fixed surfaces. Each one listed here gets its light twin. Card surfaces become white, section alternates become a soft grey, and every fake avatar stays legible. */ html[data-theme="light"][data-page="index"] .atmos{ background-image: radial-gradient(760px 640px at 8% 2%, rgba(177,20,82,.10), transparent 62%), radial-gradient(680px 560px at 96% 32%, rgba(240,76,138,.07), transparent 62%), radial-gradient(820px 600px at 30% 96%, rgba(140,13,70,.06), transparent 62%); } html[data-theme="light"][data-page="index"] .amb{ opacity:.3; } html[data-theme="light"][data-page="index"] .aurora-live{ opacity:.5; } /* The mood layers fade in and out with opacity, so their colour is lowered instead of their opacity, or they would show all the time. */ html[data-theme="light"][data-page="index"] .m-warm{ background:radial-gradient(circle at 50% 50%, rgba(255,140,90,.09), transparent 64%); } html[data-theme="light"][data-page="index"] .m-violet{ background:radial-gradient(circle at 50% 50%, rgba(120,90,220,.10), transparent 64%); } html[data-theme="light"][data-page="index"] .m-green{ background:radial-gradient(circle at 50% 50%, rgba(62,207,142,.08), transparent 64%); } html[data-theme="light"][data-page="index"] .hero-light{ opacity:.6; } html[data-theme="light"][data-page="index"] .logo-mark{ filter:none; } html[data-theme="light"][data-page="index"] .sec-alt{ background:#EFEFF4; } html[data-theme="light"][data-page="index"] footer{ background:#EEEEF3; } html[data-theme="light"][data-page="index"] .f-soc{ background:#FFFFFF; } html[data-theme="light"][data-page="index"] .tt, html[data-theme="light"][data-page="index"] .cm-post, html[data-theme="light"][data-page="index"] .cm-pt-ico, html[data-theme="light"][data-page="index"] .maya, html[data-theme="light"][data-page="index"] .chip-q, html[data-theme="light"][data-page="index"] .ch-panel, html[data-theme="light"][data-page="index"] .bf, html[data-theme="light"][data-page="index"] .rc, html[data-theme="light"][data-page="index"] .pcard, html[data-theme="light"][data-page="index"] .step, html[data-theme="light"][data-page="index"] .step-tag, html[data-theme="light"][data-page="index"] .report, html[data-theme="light"][data-page="index"] .tcard, html[data-theme="light"][data-page="index"] .t-rep, html[data-theme="light"][data-page="index"] .sc, html[data-theme="light"][data-page="index"] .test, html[data-theme="light"][data-page="index"] .price, html[data-theme="light"][data-page="index"] .c-item, html[data-theme="light"][data-page="index"] .soc, html[data-theme="light"][data-page="index"] .form-card, html[data-theme="light"][data-page="index"] .ch-label{ background:#FFFFFF; } html[data-theme="light"][data-page="index"] .sc:hover{ background:#FFFFFF; } html[data-theme="light"][data-page="index"] .cm-post.challenge, html[data-theme="light"][data-page="index"] .cmp-col.right{ background:#FFF4F8; } html[data-theme="light"][data-page="index"] .cmp-col{ background:#FFFFFF; } html[data-theme="light"][data-page="index"] .cmp-mid{ background:#F5F5F8; } html[data-theme="light"][data-page="index"] .cmp-x{ background:rgba(0,0,0,.05); color:#8A8A9A; } html[data-theme="light"][data-page="index"] .maya-top, html[data-theme="light"][data-page="index"] .maya-in, html[data-theme="light"][data-page="index"] .rep-note{ background:#F5F5F8; } html[data-theme="light"][data-page="index"] .mb.bot, html[data-theme="light"][data-page="index"] .maya-typing, html[data-theme="light"][data-page="index"] .bub.them{ background:#F1F1F5; border-color:#E3E3EA; } html[data-theme="light"][data-page="index"] .ch-close, html[data-theme="light"][data-page="index"] .cm-av.anon, html[data-theme="light"][data-page="index"] .bar-tr, html[data-theme="light"][data-page="index"] .fc-bar, html[data-theme="light"][data-page="index"] .meter{ background:#E3E3EA; } html[data-theme="light"][data-page="index"] .ch-dot{ border-color:#FFFFFF; } html[data-theme="light"][data-page="index"] .ph-foot{ border-top-color:#E3E3EA; } html[data-theme="light"][data-page="index"] .phone{ background:linear-gradient(170deg,#FFFFFF,#F1F1F5); box-shadow:0 30px 70px rgba(20,20,40,.18), 0 0 60px rgba(177,20,82,.08), inset 0 0 0 1px rgba(0,0,0,.06); } html[data-theme="light"][data-page="index"] .phone::after, html[data-theme="light"][data-page="index"] .report::after, html[data-theme="light"][data-page="index"] .form-card::after, html[data-theme="light"][data-page="index"] .tt-face::after{ opacity:0; } html[data-theme="light"][data-page="index"] .fcard{ background:rgba(255,255,255,.96); border-color:rgba(0,0,0,.08); box-shadow:0 16px 40px rgba(20,20,40,.14); } html[data-theme="light"][data-page="index"] .ph-av, html[data-theme="light"][data-page="index"] .fc-face, html[data-theme="light"][data-page="index"] .t-face, html[data-theme="light"][data-page="index"] .test-av{ background:linear-gradient(135deg,#DADAE3,#C4C4CF); color:#2A2A35; } html[data-theme="light"][data-page="index"] .c-net .node, html[data-theme="light"][data-page="index"] .c-net .bub{ fill:#FFFFFF; } html[data-theme="light"][data-page="index"] .c-net .bub{ stroke:rgba(0,0,0,.12); } html[data-theme="light"][data-page="index"] .tt:hover, html[data-theme="light"][data-page="index"] .bf:hover, html[data-theme="light"][data-page="index"] .pcard:hover, html[data-theme="light"][data-page="index"] .step:hover, html[data-theme="light"][data-page="index"] .sc:hover, html[data-theme="light"][data-page="index"] .test:hover{ box-shadow:0 18px 44px rgba(20,20,40,.12); } html[data-theme="light"][data-page="index"] .btn-primary::before{ opacity:.5; } html[data-theme="light"][data-page="index"] .flag{ color:#8A5400; background:rgba(240,162,76,.14); border-color:rgba(240,162,76,.4); } html[data-theme="light"][data-page="index"] .stars{ color:#C57A1C; } html[data-theme="light"][data-page="index"] .q-mark{ color:rgba(177,20,82,.10); } /* ═══ 11. THE PRACTICE APP ═══ */ html[data-theme="light"][data-page="app"] .glow-behind, html[data-theme="light"][data-page="app"] .amb1, html[data-theme="light"][data-page="app"] .amb2, html[data-theme="light"][data-page="app"] .tutor-glow, html[data-theme="light"][data-page="app"] .sc-glow{ opacity:.35; } html[data-theme="light"][data-page="app"] .brand img, html[data-theme="light"][data-page="app"] .intro-logo{ filter:none; } html[data-theme="light"][data-page="app"] .call-tip{ background:rgba(0,0,0,.03); } html[data-theme="light"][data-page="app"] .pc-meter{ background:rgba(0,0,0,.08); } html[data-theme="light"][data-page="app"] .pc-mark.ok{ color:#1F9E6C; } html[data-theme="light"][data-page="app"] .call-text-toggle:hover{ border-color:rgba(0,0,0,.25); } html[data-theme="light"][data-page="app"] .modal-overlay{ background:rgba(20,20,30,.45); } html[data-theme="light"][data-page="app"] .q-card{ box-shadow:0 18px 50px rgba(20,20,40,.10); } html[data-theme="light"][data-page="app"] #screen-call .call-client-card{ box-shadow:0 6px 20px rgba(20,20,40,.10); } html[data-theme="light"][data-page="app"] .bub.user{ background:linear-gradient(135deg,rgba(177,20,82,.10),rgba(240,76,138,.08)); border-color:rgba(177,20,82,.25); } html[data-theme="light"][data-page="app"] .btn-pdf{ box-shadow:0 10px 28px rgba(177,20,82,.22); } html[data-theme="light"][data-page="app"] .mic-orb.live{ box-shadow:0 8px 34px rgba(177,20,82,.35); } html[data-theme="light"][data-page="app"] .mic-orb.listening{ box-shadow:0 0 40px rgba(240,76,138,.45); } html[data-theme="light"][data-page="app"] .time-banner{ color:#7A4E00; } html[data-theme="light"][data-page="app"] .ba-cell.good{ border-color:rgba(31,158,108,.35); } html[data-theme="light"][data-page="app"] .rp-suggest{ background:rgba(31,158,108,.07); border-color:rgba(31,158,108,.28); } /* ═══ 12. LOGIN has no top bar, so the switch sits in the top right corner ═══ */ .login-toggle{ position:fixed; top:16px; right:16px; z-index:5; background:var(--bg); } html[data-theme="light"] .login-toggle{ background:#FFFFFF; } /* app icon becomes the plain mark in light mode: no tile, no rounded box */ html[data-theme="light"][data-page="app"] .brand img, html[data-theme="light"][data-page="app"] .intro-logo{ border-radius:0; } /* pale pink and mint text inside the app report: real colours on white */ html[data-theme="light"][data-page="app"] .rp-badge, html[data-theme="light"][data-page="app"] .rp-line.you b, html[data-theme="light"][data-page="app"] .rp-improve-btn{ color:#B11452; } html[data-theme="light"][data-page="app"] .rep-card-label[style*="10b981"], html[data-theme="light"][data-page="app"] .pc-mark.ok, html[data-theme="light"][data-page="app"] [style*="color:#34d399"], html[data-theme="light"][data-page="app"] [style*="color:#10b981"]{ color:#1F9E6C !important; } /* ═══ 13. SMALL PHONES (360px class), both themes ═══ The switch adds one more thing to bars that were already full on the smallest phones. These rules make room for it: tighter buttons and edges, and nothing wraps or scrolls off screen. */ @media(max-width:400px){ .theme-toggle{ width:26px; height:26px; } .theme-toggle svg{ width:13px; height:13px; } /* dashboard */ html[data-page="dashboard"] .wrap.top-in{ padding:0 12px; gap:6px; } html[data-page="dashboard"] .top-right{ gap:4px; } html[data-page="dashboard"] .out{ font-size:11px; padding:5px 6px; } /* community */ html[data-page="community"] .top-in{ padding:0 10px; gap:6px; } html[data-page="community"] .top-right{ gap:4px; } html[data-page="community"] .tbtn{ font-size:11px; padding:5px 6px; } /* profile */ html[data-page="profile"] .top-in{ padding:0 12px; gap:6px; } html[data-page="profile"] .top-right{ gap:7px; } html[data-page="profile"] .back-link{ font-size:12px; } html[data-page="profile"] .out{ font-size:11.5px; padding:5px 8px; } html[data-page="profile"] .brand-name{ display:none; } /* about, faq, privacy, terms */ html[data-page="page"] .nav-in{ padding:12px 14px; gap:10px; } html[data-page="page"] .logo{ font-size:0; } /* mark only, the word comes back on bigger screens */ html[data-page="page"] .nav-right{ gap:8px; } html[data-page="page"] .nav-back{ font-size:12.5px; white-space:nowrap; } html[data-page="page"] .btn-sm{ padding:9px 12px; font-size:13px; white-space:nowrap; } } /* Below 340px (very old, very small phones) the two busiest bars have no room at all, so the switch steps out there. The Profile page's Appearance card and every other page still offer it. */ @media(max-width:340px){ html[data-page="dashboard"] .theme-toggle, html[data-page="community"] .theme-toggle{ display:none; } } /* Community: the Log out button sat a few pixels shorter than the links beside it because buttons do not inherit line height. Now they match. */ html[data-page="community"] button.tbtn{ line-height:inherit; } /* Score chips on the dashboard: the mint, amber and pink used on dark are far too pale to read on white, so light mode uses deeper versions. */ html[data-theme="light"][data-page="dashboard"] .score.good{ color:#177A53; background:rgba(31,158,108,.14); } html[data-theme="light"][data-page="dashboard"] .score.mid { color:#8A5400; background:rgba(181,114,0,.14); } html[data-theme="light"][data-page="dashboard"] .score.low { color:#B11452; background:rgba(177,20,82,.12); } /* Green "Verified" and "Reviewed" badges on the homepage */ html[data-theme="light"][data-page="index"] .t-badge, html[data-theme="light"][data-page="index"] .test-badge, html[data-theme="light"][data-page="index"] .f-sent, html[data-theme="light"][data-page="index"] .fc-tick, html[data-theme="light"][data-page="index"] .fc-up{ color:#177A53; } /* Community filter row on phones: the search box shared a line with the sort buttons, so its placeholder was cut off mid word and "Saved" wrapped alone. Giving search its own line fixes both. Applies in light and dark. */ @media(max-width:460px){ html[data-page="community"] .searchbox{ flex:1 0 100%; } } /* ═══ 14. THE ANALYSING SCREEN ═══ Both tracks were drawn in the app's inset grey, which on white is almost the page itself, so the ring looked like a floating arc and the progress bar had no groove to travel along. */ html[data-theme="light"][data-page="app"] .loader-ring{ border-color:#E1E1EB; border-top-color:var(--rasp2); } html[data-theme="light"][data-page="app"] .gen-bar{ background:#E1E1EB; } html[data-theme="light"][data-page="app"] .q-progress-track{ background:#E1E1EB; } html[data-theme="light"][data-page="app"] .mp-bar{ background:#E1E1EB; } html[data-theme="light"][data-page="app"] .cmp-bar{ background:#E1E1EB; } /* ═══ 15. LIGHT MODE POLISH ═══ Dark mode separates surfaces with light: a card is lighter than the page. On white that trick is gone, so cards need edges and a little lift or the whole screen reads as one flat sheet. */ html[data-theme="light"]{ --border:#E1E1EB; --shadow-card:0 1px 2px rgba(20,20,45,.04), 0 6px 18px rgba(20,20,45,.05); --shadow-lift:0 2px 4px rgba(20,20,45,.05), 0 14px 34px rgba(20,20,45,.08); } /* Cards lift off the page. */ html[data-theme="light"][data-page="dashboard"] .card, html[data-theme="light"][data-page="dashboard"] .rep, html[data-theme="light"][data-page="profile"] .card, html[data-theme="light"][data-page="community"] .post, html[data-theme="light"][data-page="community"] .quiz, html[data-theme="light"][data-page="app"] .q-card, html[data-theme="light"][data-page="app"] .persona-card, html[data-theme="light"][data-page="app"] .pc-card, html[data-theme="light"][data-page="app"] .rep-card, html[data-theme="light"][data-page="app"] .rp-card, html[data-theme="light"][data-page="app"] .month-progress, html[data-theme="light"][data-page="app"] .tutor-card, html[data-theme="light"][data-page="app"] .sc-card, html[data-theme="light"][data-page="app"] .call-client-card, html[data-theme="light"][data-page="page"] .qa, html[data-theme="light"][data-page="page"] .strip{ box-shadow:var(--shadow-card); } html[data-theme="light"][data-page="app"] .q-card, html[data-theme="light"][data-page="app"] .persona-card, html[data-theme="light"][data-page="app"] .pc-card{ box-shadow:var(--shadow-lift); } /* The raspberry wash behind everything was tuned for a black page. On white it turns the background a muddy pink and greys the white cards down. */ html[data-theme="light"][data-page="app"] .glow-behind, html[data-theme="light"][data-page="app"] .amb1, html[data-theme="light"][data-page="app"] .amb2{ opacity:.14; } html[data-theme="light"][data-page="dashboard"] body::before, html[data-theme="light"][data-page="profile"] body::before, html[data-theme="light"][data-page="community"] body::before{ opacity:.22; } html[data-theme="light"][data-page="login"] body::before{ opacity:.30; } /* Primary buttons keep their gradient but gain a raspberry glow, which is what gives them presence on dark and is missing on white. */ html[data-theme="light"] .btn-primary:not(:disabled), html[data-theme="light"] .q-next:not(:disabled), html[data-theme="light"] .cta:not(.off):not(:disabled), html[data-theme="light"] .btn:not(:disabled), html[data-theme="light"] .save:not(:disabled), html[data-theme="light"] .post-btn:not(:disabled), html[data-theme="light"] .newchat:not(:disabled){ box-shadow:0 2px 6px rgba(140,13,70,.18), 0 8px 22px rgba(177,20,82,.20); } /* A button that cannot be pressed should not glow like one that can. */ html[data-theme="light"] button:disabled{ box-shadow:none; } /* Section labels were pure raspberry on white and shouted. Slightly calmer. */ html[data-theme="light"] .card-h, html[data-theme="light"] .rep-card-label{ letter-spacing:.07em; } /* Inputs read as fields, not as flat panels. */ html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select, html[data-theme="light"] .q-input, html[data-theme="light"] .composer textarea, html[data-theme="light"] .searchbox, html[data-theme="light"] .box textarea{ box-shadow:inset 0 1px 2px rgba(20,20,45,.04); } /* Chat bubbles: the client's line is a white card, yours stays raspberry. */ html[data-theme="light"][data-page="app"] .bub.ai{ box-shadow:0 1px 2px rgba(20,20,45,.05); } html[data-theme="light"][data-page="maya"] .bub:not(.me){ box-shadow:0 1px 2px rgba(20,20,45,.05); } /* Dividers inside cards were the same grey as the card edge, so nested boxes blurred together. */ html[data-theme="light"] .rep-body, html[data-theme="light"] .rep.open .rep-body{ border-top-color:#ECECF3; }