/* ========================================================= Parla Italiano — stylesheet Sections: Tokens · Themes · Accents · Base · Header · Auth dialog · Home · Module · Learn · Flashcards · Quiz · Profile · Legal · Footer · Responsive ========================================================= */ /* ---------- Tokens ---------- */ :root{ --radius:14px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; /* Minimum comfortable tap target. Apple and Google both say 44px. */ --tap:44px; /* Gutter respects notches and rounded corners in landscape. */ --gutter-l:max(20px, env(safe-area-inset-left)); --gutter-r:max(20px, env(safe-area-inset-right)); } /* ---------- Themes ---------- `data-theme` is set on by an inline script before first paint, so there is no flash of the wrong theme on load. */ :root, [data-theme="light"]{ --bg:#faf7f2; --card:#ffffff; --surface-2:#efe9e0; --surface-3:#f4efe8; --ink:#1e1c1a; --ink-soft:#6b6560; --line:#e6e0d7; --red:#b23a34; --red-soft:#fbeceb; --red-ink:#8c2b26; --gold:#c58b2b; --warn-bg:#fff8e6; --warn-line:#f0dfae; --warn-ink:#7a5a15; --shadow:0 1px 2px rgba(30,28,26,.05), 0 8px 24px rgba(30,28,26,.05); --shadow-lg:0 24px 60px rgba(30,28,26,.22); --scrim:rgba(30,28,26,.45); color-scheme:light; } [data-theme="dark"]{ --bg:#141312; --card:#1e1c1b; --surface-2:#2a2724; --surface-3:#302c29; --ink:#f2ede6; --ink-soft:#a49b92; --line:#332f2c; --red:#e0685f; --red-soft:#3a1f1d; --red-ink:#f0a49d; --gold:#d9a44f; --warn-bg:#33290f; --warn-line:#5c4a1c; --warn-ink:#e8cd8e; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.6); --scrim:rgba(0,0,0,.6); color-scheme:dark; } /* "Auto" follows the device. */ @media (prefers-color-scheme: dark){ [data-theme="auto"]{ --bg:#141312; --card:#1e1c1b; --surface-2:#2a2724; --surface-3:#302c29; --ink:#f2ede6; --ink-soft:#a49b92; --line:#332f2c; --red:#e0685f; --red-soft:#3a1f1d; --red-ink:#f0a49d; --gold:#d9a44f; --warn-bg:#33290f; --warn-line:#5c4a1c; --warn-ink:#e8cd8e; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.6); --scrim:rgba(0,0,0,.6); color-scheme:dark; } } /* ---------- Accents ---------- --accent-soft is mixed against the current background, so every accent works in both light and dark without a second set of values. The plain value first is the fallback for browsers without color-mix. */ :root, [data-accent="green"] { --accent:#1f6b4f; --accent-dark:#17513c; --accent-soft:#e8f1ec; } [data-accent="blue"] { --accent:#2b5f8f; --accent-dark:#21496d; --accent-soft:#e7eef5; } [data-accent="terracotta"]{ --accent:#b1542f; --accent-dark:#8c4325; --accent-soft:#f8ebe5; } [data-accent="plum"] { --accent:#6b3f6e; --accent-dark:#533055; --accent-soft:#f0e9f1; } @supports (color: color-mix(in srgb, red 10%, white)){ :root, [data-accent]{ --accent-soft:color-mix(in srgb, var(--accent) 14%, var(--bg)); } } /* ---------- Base ---------- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--bg);color:var(--ink);font-family:var(--font); font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased; padding-bottom:calc(48px + env(safe-area-inset-bottom)); overflow-wrap:break-word; } .wrap{max-width:820px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)} [hidden]{display:none !important} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} button{font-family:inherit} .warn{ background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink); font-size:13px;padding:10px 13px;border-radius:10px;margin:14px 0; } /* ---------- Header ---------- */ header{ background:var(--card);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50; padding-top:env(safe-area-inset-top); } .hbar{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 0} .flag{width:26px;height:18px;border-radius:3px;overflow:hidden;display:flex;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .flag i{flex:1} .flag i:nth-child(1){background:#009246} .flag i:nth-child(2){background:#fff} .flag i:nth-child(3){background:#ce2b37} .brand{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.2px;margin:0;flex:1;min-width:0} .brand small{ display:block;font-family:var(--font);font-size:11.5px;font-weight:500; color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .btn-ghost{ background:none;border:1px solid var(--line);border-radius:99px; padding:0 15px;min-height:var(--tap);font:inherit;font-size:14px; color:var(--ink-soft);cursor:pointer;flex:0 0 auto; display:inline-flex;align-items:center;gap:7px; } .btn-ghost:hover{background:var(--bg);color:var(--ink)} #accountBtn.signed-in{ border-color:var(--accent);color:var(--accent);background:var(--accent-soft); max-width:170px;overflow:hidden; } #accountBtn .avatar{ width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto; } #accountBtn .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- Auth dialog ---------- */ dialog.auth{ border:0;border-radius:16px;padding:0;max-width:400px;width:calc(100% - 32px); background:var(--card);color:var(--ink);box-shadow:var(--shadow-lg); } dialog.auth::backdrop{background:var(--scrim)} dialog.auth form{padding:28px 24px 22px;position:relative} dialog.auth h2{font-family:var(--serif);font-size:23px;margin:0 0 6px;padding-right:30px} .auth-intro{margin:0 0 18px;font-size:14px;color:var(--ink-soft)} .auth-close{ position:absolute;top:8px;right:8px;background:none;border:0; font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer; width:var(--tap);height:var(--tap);border-radius:50%; } .auth-close:hover{color:var(--ink);background:var(--surface-2)} .auth-error{ background:var(--red-soft);border:1px solid var(--red);color:var(--red-ink); font-size:13.5px;padding:9px 12px;border-radius:9px;margin:0 0 14px; } .auth-ok{ background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent); font-size:13.5px;padding:9px 12px;border-radius:9px;margin:0 0 14px; } .field{display:block;margin-bottom:13px} .field > span{display:block;font-size:13px;font-weight:600;margin-bottom:5px} .field > span em{font-weight:400;font-style:normal;color:var(--ink-soft)} .field input, .field select, .field textarea{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px; background:var(--bg);font:inherit;font-size:16px;color:var(--ink);min-height:var(--tap); } .field input:focus, .field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)} .field input:disabled{opacity:.6} .auth-submit{ width:100%;margin-top:6px;padding:13px;border:0;border-radius:11px;min-height:var(--tap); background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer; } .auth-submit:hover:not(:disabled){background:var(--accent-dark)} .auth-submit:disabled{opacity:.6;cursor:default} .auth-alt{ width:100%;margin-top:9px;padding:12px;border:1px solid var(--line);border-radius:11px; min-height:var(--tap);background:var(--card);color:var(--ink);font:inherit;font-size:14.5px; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; } .auth-alt:hover{background:var(--surface-3)} .auth-switch{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--ink-soft)} .auth-switch button{ background:none;border:0;font:inherit;font-size:13.5px;color:var(--accent); font-weight:600;cursor:pointer;padding:6px 4px;text-decoration:underline; } /* ---------- Home ---------- */ .hero{padding:32px 0 6px} .hero h2{font-family:var(--serif);font-size:30px;line-height:1.2;margin:0 0 8px} .hero p{color:var(--ink-soft);margin:0;max-width:52ch} .sync-note{margin:10px 0 0;font-size:13px;color:var(--accent);font-weight:500} .overall{margin:24px 0 6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px} .overall-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:10px} .overall-top b{font-size:14px} .bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden} .bar > span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .45s ease} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:20px 0 40px} .mod{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:18px;text-align:left;cursor:pointer;font:inherit;color:inherit; display:flex;flex-direction:column;gap:10px;transition:transform .15s ease, box-shadow .15s ease; } .mod:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .mod-num{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gold);text-transform:uppercase} .mod h3{font-family:var(--serif);font-size:18.5px;margin:0} .mod .it{font-size:13.5px;color:var(--ink-soft);font-style:italic;margin:-6px 0 0} .mod-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);margin-top:auto;padding-top:6px} .tick{color:var(--accent);font-weight:700} .mini{flex:1;height:5px;background:var(--line);border-radius:99px;overflow:hidden} .mini > span{display:block;height:100%;background:var(--accent)} /* ---------- Module shell ---------- */ .back{ background:none;border:0;font:inherit;font-size:15px;color:var(--ink-soft); cursor:pointer;padding:18px 0 6px;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap); } .back:hover{color:var(--ink)} .mhead{padding:6px 0 18px;border-bottom:1px solid var(--line)} .mhead h2{font-family:var(--serif);font-size:27px;margin:0 0 4px} .mhead p{margin:0;color:var(--ink-soft);font-size:14.5px} .tabs{display:flex;gap:6px;margin:18px 0 22px;background:var(--surface-2);padding:4px;border-radius:11px} .tabs button{ flex:1;border:0;background:none;font:inherit;font-size:14.5px;font-weight:500; padding:11px 6px;min-height:var(--tap);border-radius:8px;cursor:pointer;color:var(--ink-soft); } .tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.07)} /* ---------- Learn ---------- */ .sechead{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 2px} .list{display:flex;flex-direction:column;gap:8px;margin-bottom:36px} .row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:12px} .row .txt{flex:1;min-width:0} .row .en{font-size:14px;color:var(--ink-soft)} .row .it{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:1px} .row .ph{font-size:12.5px;color:var(--gold);letter-spacing:.02em;margin-top:2px} .say{ flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line); background:var(--bg);cursor:pointer;display:grid;place-items:center;color:var(--accent); transition:background .15s ease; } .say:hover{background:var(--accent-soft)} .say.on{background:var(--accent);color:#fff;border-color:var(--accent)} .say svg{width:19px;height:19px;fill:currentColor} /* ---------- Flashcards ---------- */ .fc-wrap{margin-bottom:36px} .fc-count{text-align:center;font-size:13px;color:var(--ink-soft);margin-bottom:12px} .card3d{perspective:1200px;height:240px;margin-bottom:16px} .card3d .inner{ position:relative;width:100%;height:100%;cursor:pointer; transition:transform .5s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d; } .card3d.flipped .inner{transform:rotateY(180deg)} .face{ position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden; background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; padding:26px;text-align:center; } .face .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);position:absolute;top:16px;left:0;right:0} .face .big{font-family:var(--serif);font-size:25px;line-height:1.25;font-weight:600} .face .ph{font-size:14px;color:var(--gold)} .face .hint{position:absolute;bottom:15px;left:0;right:0;font-size:12px;color:var(--ink-soft)} .back-face{transform:rotateY(180deg);background:var(--accent-soft);border-color:var(--accent)} .fc-say{position:absolute;bottom:10px;right:10px} .fc-nav{display:flex;gap:10px} .fc-nav button{ flex:1;padding:12px 6px;min-height:var(--tap);border-radius:11px;border:1px solid var(--line); background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer; } .fc-nav button:hover{background:var(--surface-3)} .fc-nav button:disabled{opacity:.4;cursor:default} .fc-nav .primary{background:var(--accent);color:#fff;border-color:var(--accent)} .fc-nav .primary:hover{background:var(--accent-dark)} /* ---------- Quiz ---------- */ .quiz{margin-bottom:36px} .q-prog{font-size:13px;color:var(--ink-soft);margin-bottom:10px;display:flex;justify-content:space-between} .q-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .q-ask{font-size:13.5px;color:var(--ink-soft);margin-bottom:4px} .q-term{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .opts{display:flex;flex-direction:column;gap:9px} .opt{ text-align:left;padding:13px 15px;min-height:var(--tap);border-radius:11px; border:1px solid var(--line);background:var(--bg);color:var(--ink); font:inherit;font-size:15.5px;cursor:pointer; } .opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)} .opt:disabled{cursor:default} .opt.right{background:var(--accent-soft);border-color:var(--accent);font-weight:600} .opt.wrong{background:var(--red-soft);border-color:var(--red)} .q-next{ margin-top:16px;width:100%;padding:13px;min-height:var(--tap);border-radius:11px;border:0; background:var(--accent);color:#fff;font:inherit;font-size:15px;cursor:pointer; } .q-next:hover{background:var(--accent-dark)} .result{text-align:center;padding:34px 22px} .result .score{font-family:var(--serif);font-size:46px;font-weight:600;color:var(--accent)} .result p{color:var(--ink-soft)} .result .row-btns{display:flex;gap:10px;margin-top:18px} .result .row-btns .opt{text-align:center;flex:1;justify-content:center} /* ---------- Profile ---------- */ .profile{padding-bottom:40px} .profile-head{display:flex;align-items:center;gap:14px;padding:6px 0 20px;border-bottom:1px solid var(--line)} .profile-head .big-avatar{ width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center;font-size:21px;font-weight:700;flex:0 0 auto; } .profile-head h2{font-family:var(--serif);font-size:24px;margin:0 0 2px;overflow-wrap:anywhere} .profile-head p{margin:0;font-size:14px;color:var(--ink-soft);overflow-wrap:anywhere} .card-section{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:20px;margin-top:16px; } .card-section > h3{ font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-soft);margin:0 0 4px; } .card-section > .section-hint{margin:0 0 16px;font-size:13.5px;color:var(--ink-soft)} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .save-row{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap} .btn-primary{ padding:12px 20px;min-height:var(--tap);border:0;border-radius:11px; background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer; } .btn-primary:hover:not(:disabled){background:var(--accent-dark)} .btn-primary:disabled{opacity:.6;cursor:default} .btn-secondary{ padding:12px 18px;min-height:var(--tap);border:1px solid var(--line);border-radius:11px; background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer; } .btn-secondary:hover{background:var(--surface-3)} .btn-danger{ padding:12px 18px;min-height:var(--tap);border:1px solid var(--red);border-radius:11px; background:transparent;color:var(--red);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer; } .btn-danger:hover{background:var(--red-soft)} .saved-flag{font-size:13.5px;color:var(--accent);font-weight:600} /* Toggle rows */ .toggle{ display:flex;align-items:center;gap:14px;padding:13px 0; border-top:1px solid var(--line);cursor:pointer; } .card-section .toggle:first-of-type{border-top:0;padding-top:4px} .toggle .toggle-text{flex:1;min-width:0} .toggle .toggle-text b{display:block;font-size:15px;font-weight:600} .toggle .toggle-text span{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px} .toggle input{position:absolute;opacity:0;pointer-events:none} .switch{ flex:0 0 auto;width:50px;height:30px;border-radius:99px;background:var(--line); position:relative;transition:background .18s ease; } .switch::after{ content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease; } .toggle input:checked + .switch{background:var(--accent)} .toggle input:checked + .switch::after{transform:translateX(20px)} .toggle input:focus-visible + .switch{outline:2px solid var(--accent);outline-offset:2px} .toggle input:disabled + .switch{opacity:.45} /* Theme picker */ .theme-row{display:flex;gap:8px;margin-bottom:18px} .theme-row button{ flex:1;padding:11px 4px;min-height:var(--tap);border:1px solid var(--line);border-radius:11px; background:var(--bg);color:var(--ink);font:inherit;font-size:14px;cursor:pointer; } .theme-row button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);font-weight:600} .accent-row{display:flex;gap:12px;flex-wrap:wrap} .accent-row button{ width:var(--tap);height:var(--tap);border-radius:50%;cursor:pointer; border:2px solid var(--line);padding:0;position:relative; } .accent-row button[aria-pressed="true"]{border-color:var(--ink)} .accent-row button[aria-pressed="true"]::after{ content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:17px;font-weight:700; } /* Passkeys */ .passkey-list{list-style:none;margin:0 0 14px;padding:0} .passkey-list li{ display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line); } .passkey-list li:first-child{border-top:0} .passkey-list .pk-text{flex:1;min-width:0} .passkey-list .pk-text b{display:block;font-size:15px} .passkey-list .pk-text span{font-size:12.5px;color:var(--ink-soft)} .pk-remove{ background:none;border:0;color:var(--red);font:inherit;font-size:14px; cursor:pointer;padding:10px;min-height:var(--tap); } .link-list{list-style:none;margin:0;padding:0} .link-list li{border-top:1px solid var(--line)} .link-list li:first-child{border-top:0} .link-list a{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 0;min-height:var(--tap);color:var(--ink);text-decoration:none;font-size:15px; } .link-list a:hover{color:var(--accent)} .link-list a::after{content:"›";color:var(--ink-soft);font-size:19px} .danger-section{border-color:var(--red)} .danger-section > h3{color:var(--red)} /* ---------- Legal pages ---------- */ .legal{max-width:720px;padding-top:30px;padding-bottom:60px} .legal h1{font-family:var(--serif);font-size:30px;margin:0 0 6px} .legal .updated{color:var(--ink-soft);font-size:13.5px;margin:0 0 26px} .legal h2{font-family:var(--serif);font-size:20px;margin:32px 0 8px} .legal h3{font-size:15px;margin:20px 0 6px} .legal p, .legal li{color:var(--ink);font-size:15.5px;line-height:1.65} .legal ul{padding-left:22px} .legal li{margin-bottom:6px} .legal a{color:var(--accent)} .legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px} .legal th, .legal td{text-align:left;padding:9px 10px;border:1px solid var(--line);vertical-align:top} .legal th{background:var(--surface-2);font-weight:600} .review-banner{ background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink); padding:14px 16px;border-radius:11px;margin:0 0 26px;font-size:14px; } /* ---------- Footer ---------- */ footer{ text-align:center;font-size:12.5px;color:var(--ink-soft); padding:26px 0 10px;border-top:1px solid var(--line);margin-top:20px; } footer .foot-links{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px} footer .foot-links a, footer .foot-links button{ color:var(--ink-soft);font:inherit;font-size:13px;background:none;border:0; cursor:pointer;text-decoration:underline;padding:9px 8px; } footer .foot-links a:hover, footer .foot-links button:hover{color:var(--ink)} /* ---------- Responsive ---------- */ @media (max-width:640px){ .hero{padding-top:24px} .hero h2{font-size:25px} .card3d{height:220px} .face .big{font-size:22px} .two-col{grid-template-columns:1fr} .card-section{padding:18px 16px} .profile-head .big-avatar{width:46px;height:46px;font-size:18px} .profile-head h2{font-size:21px} .mhead h2{font-size:23px} .legal h1{font-size:25px} } @media (max-width:420px){ .brand{font-size:17px} .brand small{font-size:10.5px} .hbar{gap:9px} .btn-ghost{padding:0 12px;font-size:13.5px} #accountBtn.signed-in{max-width:118px} .hero h2{font-size:23px} .tabs button{font-size:13.5px;padding:11px 2px} .fc-nav button{font-size:13.5px;padding:12px 2px} .theme-row button{font-size:13px} .q-term{font-size:21px} .result .score{font-size:40px} } /* Landscape phones: the flashcard should not push the controls off-screen. */ @media (max-height:520px) and (orientation:landscape){ .card3d{height:170px} .face .big{font-size:20px} .hero{padding-top:18px} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} .card3d .inner{transition:none !important} }