/* ===================================================================== Green & Sustainable Villa Experience — MONAQASAT Design system + layout. Logical properties keep Arabic (RTL) and English (LTR) in sync. ===================================================================== */ /* ---------- Fonts (offline, Readex Pro — SIL Open Font License) ---------- */ @font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(../assets/fonts/readex-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(../assets/fonts/readex-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(../assets/fonts/readex-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- */ :root { --ink: #0F2A3A; --ink-2: #2E4A59; --muted: #5E7480; --brand: #1C5A7A; /* MONAQASAT deep blue */ --brand-teal: #63C3C5; /* MONAQASAT teal */ --brand-orange: #F15E25; /* MONAQASAT orange */ --leaf: #2E9E6B; --leaf-soft: #E4F4EB; --sun: #FFC24B; --hot: #E4572E; --amber: #F2A541; --water: #2F8FD0; --bg: #F3F0EA; --card: #FFFFFF; --line: rgba(15, 42, 58, 0.10); --line-2: rgba(15, 42, 58, 0.18); --glass: rgba(255, 255, 255, 0.78); --radius: 22px; --radius-sm: 14px; --shadow: 0 12px 32px rgba(15, 42, 58, 0.10); --shadow-sm: 0 4px 14px rgba(15, 42, 58, 0.08); --touch: 3.25rem; --sky1: #7fb3d5; --sky2: #f2d6b8; --sky3: #f3e3cd; --font: 'Readex Pro', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif; --ease: cubic-bezier(.2, .8, .2, 1); --panel-w: clamp(22rem, 33vw, 36rem); --surface: #FFFFFF; /* cards, inputs, menus (dark in night mode) */ --brand-deep: #1C5A7A; /* brand as a fill behind white text */ --sel-leaf: #F6FCF8; --sel-teal: #F2FBFB; --sel-teal-2: #E8F4F2; --sketch-bg: #FBF8F2; --soft: #F4F7F8; --soft-blue: #EEF6F9; --tint-amber: #FFF4E0; --tint-amber-2: #FFF9F2; --tint-orange: #FFF6F1; --tint-purple: #EFE8FB; --tint-purple-2: #FBF9FF; --tint-red: #FDECE7; --tint-red-2: #FFF1EC; color-scheme: light; } html { font-size: clamp(14px, 0.5vw + 8.5px, 24px); -webkit-text-size-adjust: 100%; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.45; overflow: hidden; height: 100dvh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } button { font: inherit; color: inherit; cursor: pointer; } button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; } img { max-width: 100%; } [hidden] { display: none !important; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; } p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: var(--touch); padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid transparent; background: var(--card); font-weight: 600; font-size: 1rem; transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; user-select: none; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn svg { width: 1.25em; height: 1.25em; flex: none; } .btn-primary { background: var(--brand-orange); color: #fff; box-shadow: 0 8px 22px rgba(241, 94, 37, .32); } .btn-primary:hover { background: #e2531c; } .btn-dark { background: var(--brand-deep); color: #fff; } .btn-dark:hover { background: #164a65; } .btn-ghost { background: transparent; border-color: var(--line-2); } .btn-ghost:hover { background: rgba(15, 42, 58, .05); } .btn-soft { background: rgba(28, 90, 122, .08); color: var(--brand); } .btn-soft:hover { background: rgba(28, 90, 122, .14); } .btn-xl { min-height: 4rem; padding: 0 2.2rem; font-size: 1.2rem; } .btn-sm { min-height: 2.6rem; padding: 0 1rem; font-size: .9rem; } .icon-btn { width: var(--touch); height: var(--touch); border-radius: 50%; border: 1px solid var(--line); background: var(--glass); display: inline-grid; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, transform .2s; } .icon-btn svg { width: 1.35rem; height: 1.35rem; } .icon-btn:hover { background: var(--surface); } .icon-btn.on { background: var(--brand-deep); color: #fff; border-color: var(--brand); } [dir="rtl"] .flip { transform: scaleX(-1); } /* ---------- Language switch ---------- */ .lang-switch { display: inline-flex; background: rgba(15, 42, 58, .07); border-radius: 999px; padding: 4px; gap: 2px; } .lang-switch button { border: 0; background: transparent; border-radius: 999px; min-height: 2.5rem; padding: 0 1rem; font-weight: 600; color: var(--muted); } .lang-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .lang-switch .ar-label { font-family: var(--font); } /* ===================================================================== HERO ===================================================================== */ .hero { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, #8dbfdc 0%, #f6d7b5 58%, #efe2cb 100%); z-index: 5; } .hero-bg { position: absolute; inset: 0; } .hero-bg svg { width: 100%; height: 100%; display: block; } .hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(247, 243, 236, .96) 0%, rgba(247, 243, 236, .88) 34%, rgba(247, 243, 236, 0) 62%); } [dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(247, 243, 236, .96) 0%, rgba(247, 243, 236, .88) 34%, rgba(247, 243, 236, 0) 62%); } .hero-top { position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2.4rem; z-index: 2; } .hero-top .logo { height: clamp(3rem, 4.6vw, 5.4rem); width: auto; } .hero-content { position: absolute; inset-inline-start: clamp(1.5rem, 5vw, 6rem); top: 50%; transform: translateY(-46%); max-width: min(40rem, 52vw); z-index: 2; } .kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; color: var(--leaf); background: var(--leaf-soft); padding: .45rem 1rem; border-radius: 999px; margin-bottom: 1.2rem; } .kicker::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(46, 158, 107, .2); } .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700; color: var(--ink); text-wrap: balance; } .hero h1 .h-alt { display: block; font-size: .44em; font-weight: 500; color: var(--brand); margin-top: .5rem; } .hero .tagline { margin-top: 1rem; font-size: 1.25rem; color: var(--brand); font-weight: 500; } .hero .intro { margin-top: 1.1rem; font-size: 1.15rem; color: var(--ink-2); max-width: 34rem; } .hero-start { margin-top: 1.6rem; } .hero-start-label { display: flex; align-items: center; gap: .8rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; } [dir="rtl"] .hero-start-label { letter-spacing: 0; font-size: .95rem; } .hero-start-label::after { content: ''; flex: 1; height: 1px; background: var(--line-2); } .start-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .start-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem 1.15rem .9rem; text-align: start; border-radius: var(--radius); border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .82); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s; } .start-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); } .start-card:active { transform: scale(.98); } .start-card:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 3px; } .sc-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: .2rem; } .sc-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 11px; background: rgba(28, 90, 122, .1); color: var(--brand); } .sc-ico svg { width: 1.3rem; height: 1.3rem; } .sc-tag { font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; } .sc-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; } .sc-desc { font-size: .86rem; line-height: 1.5; color: var(--ink-2); } .sc-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: .45rem; } .sc-meta { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--brand); } .sc-meta svg { width: 1.05rem; height: 1.05rem; } .sc-go { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand-deep); color: #fff; transition: transform .25s var(--ease); } .sc-go svg { width: 1.15rem; height: 1.15rem; } .start-card:hover .sc-go { transform: translateX(4px); } [dir="rtl"] .start-card:hover .sc-go { transform: translateX(-4px); } .start-card.is-guided { background: linear-gradient(150deg, #F7743F 0%, var(--brand-orange) 55%, #DE4E17 100%); border-color: transparent; color: #fff; box-shadow: 0 12px 28px rgba(241, 94, 37, .32); } .start-card.is-guided:hover { border-color: transparent; box-shadow: 0 16px 36px rgba(241, 94, 37, .42); } .start-card.is-guided .sc-ico { background: rgba(255, 255, 255, .2); color: #fff; } .start-card.is-guided .sc-desc { color: rgba(255, 255, 255, .9); } .start-card.is-guided .sc-meta { color: #fff; } .start-card.is-guided .sc-go { background: #fff; color: var(--brand-orange); } .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.3rem; padding: .75rem 0; border-block: 1px solid var(--line-2); } .fact { padding-inline: 1rem; border-inline-start: 1px solid var(--line-2); line-height: 1.35; } .fact:first-child { padding-inline-start: 0; border-inline-start: 0; } .fact b { display: block; font-size: 1.15rem; color: var(--brand); font-weight: 700; direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .fact b { text-align: right; direction: rtl; font-size: 1.05rem; white-space: nowrap; } .fact span { display: block; margin-top: .15rem; font-size: .76rem; color: var(--muted); } @media (max-height: 1100px) and (min-width: 701px) { .hero-facts { display: none; } } .hero-modes { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.4rem; margin-top: 1.1rem; } .hero-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: 0; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: color .2s; } .hero-link svg { width: 1.1rem; height: 1.1rem; color: var(--muted); transition: color .2s; } .hero-link:hover, .hero-link:hover svg { color: var(--brand); } .hero-link span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: text-decoration-color .2s; } .hero-link:hover span { text-decoration-color: currentColor; } a.hero-link { text-decoration: none; } .hero-gallery { padding: 0 1rem 0 .85rem; border-radius: 999px; background: var(--brand-deep); color: #fff; box-shadow: var(--shadow-sm); transition: background .2s, transform .2s; } .hero-gallery svg, .hero-gallery:hover, .hero-gallery:hover svg { color: #fff; } .hero-gallery:hover { background: var(--brand-orange); transform: translateY(-1px); } .hero-gallery:hover span { text-decoration-color: transparent; } .hero-foot { position: absolute; bottom: 1rem; inset-inline-start: clamp(1.5rem, 5vw, 6rem); font-size: .72rem; color: var(--muted); z-index: 2; max-width: 40rem; } /* ===================================================================== MAIN LAYOUT ===================================================================== */ .main { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; } .topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: .7rem 1.4rem; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); z-index: 4; } .brand { display: flex; align-items: center; gap: .9rem; min-width: 0; border: 0; background: none; padding: 0; text-align: start; } .brand img, .brand .brand-mark { height: 2.3rem; width: auto; } .brand .brand-mark { width: 2.3rem; flex: none; } .brand .brand-title { font-weight: 600; font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand .brand-sub { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); } .progress { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; } .progress-label { font-size: .85rem; color: var(--muted); white-space: nowrap; } .progress-label b { color: var(--ink); font-weight: 600; } .progress-track { display: flex; gap: .7rem; width: min(44rem, 100%); } /* the journey's stages, each a row of its steps, always a single row */ .ph { flex: var(--n) 1 0; min-width: 0; display: grid; gap: .3rem; } .ph-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; } .ph-name { display: flex; align-items: center; justify-content: center; gap: .2rem; font-size: .68rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; transition: color .3s, opacity .3s; } .ph-name svg { width: .8rem; height: .8rem; flex: none; color: var(--brand-teal); } .ph.done .ph-name { opacity: .9; } .ph.current .ph-name { color: var(--brand); font-weight: 700; opacity: 1; } .pl-phase { display: inline-block; margin-inline-end: .5rem; padding: .05rem .55rem; border-radius: 999px; background: rgba(28, 90, 122, .09); color: var(--brand); font-weight: 600; font-size: .78rem; } .progress-track button { height: .6rem; border-radius: 999px; border: 0; padding: 0; background: rgba(15, 42, 58, .12); transition: background .3s, transform .2s; position: relative; } .progress-track button::after { content: ''; position: absolute; inset: -12px -1px; } .progress-track button.done { background: var(--brand-teal); } .progress-track button.current { background: var(--brand-orange); transform: scaleY(1.35); } .main.is-free .topbar .progress { visibility: hidden; } /* free exploration is one screen: no step counter */ .top-actions { display: flex; align-items: center; gap: .55rem; } .score-pill { display: inline-flex; align-items: center; gap: .55rem; min-height: var(--touch); padding: 0 1rem 0 .4rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; } [dir="rtl"] .score-pill { padding: 0 .4rem 0 1rem; } .score-pill .ring { width: 2.5rem; height: 2.5rem; } .score-pill .num { font-size: 1.15rem; } .score-pill small { font-weight: 400; color: var(--muted); font-size: .78rem; } /* one score: the stage shows it (with its change, rating and medal), so the top bar does not repeat it */ .top-actions .score-pill { display: none; } .workspace { display: grid; grid-template-columns: 1fr var(--panel-w); min-height: 0; } /* ---------- Stage ---------- */ .stage { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 52%, var(--sky3) 100%); transition: background 0.6s; touch-action: none; } .stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; user-select: none; } .stage.dragging > svg { cursor: grabbing; } .stage.planting > svg { cursor: crosshair; } .hud { position: absolute; z-index: 2; } .hud-score { top: 1rem; inset-inline-end: 1rem; display: flex; align-items: center; gap: .7rem; padding: .5rem 1.1rem .5rem .5rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } [dir="rtl"] .hud-score { padding: .5rem .5rem .5rem 1.1rem; } .hud-score .ring { width: 3.3rem; height: 3.3rem; } .hud-score .ring-wrap { position: relative; width: 3.3rem; height: 3.3rem; } .hud-score .ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; } .hud-score .lbl { display: flex; flex-direction: column; text-align: start; } .hud-score .lbl b { font-size: .95rem; } .hud-score .lbl small { font-size: .75rem; color: var(--muted); } /* villa level in the score: the medal reached on the ring, and the way to the next one */ .hud-score .lbl { gap: .15rem; min-width: 8.5rem; } .tier-next { display: inline-flex; align-items: center; gap: .3rem; } .tier-next .medal { width: .95rem; height: auto; flex: none; } .medal.ghost { filter: grayscale(.35); opacity: .75; } .tier-bar { display: block; height: 4px; border-radius: 4px; background: rgba(15, 42, 58, .1); overflow: hidden; } .tier-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-teal), var(--leaf)); transition: width .6s var(--ease); } [dir="rtl"] .tier-bar i { background: linear-gradient(270deg, var(--brand-teal), var(--leaf)); } .hud-medal { position: absolute; bottom: -.55rem; inset-inline-end: -.5rem; width: 1.65rem; filter: drop-shadow(0 3px 5px rgba(15, 42, 58, .3)); animation: medalIn .6s var(--ease) backwards; } .hud-medal .medal { width: 100%; height: auto; display: block; } @keyframes medalIn { from { opacity: 0; transform: scale(.3) rotate(-30deg); } } /* a band reached for the first time: the medal rises over the villa, then bows out */ .tier-burst { position: absolute; z-index: 7; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .35rem; padding: 1.4rem 2rem 1.2rem; border-radius: 28px; background: var(--glass-strong, rgba(255, 255, 255, .94)); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(15, 42, 58, .28); text-align: center; pointer-events: none; animation: tbIn .7s cubic-bezier(.2, 1.4, .4, 1) backwards; } .tier-burst.out { animation: tbOut .5s var(--ease) forwards; } .tier-burst .medal { position: relative; width: 5.2rem; height: auto; animation: tbMedal 1.1s cubic-bezier(.2, 1.4, .4, 1) .1s backwards; filter: drop-shadow(0 8px 14px rgba(15, 42, 58, .28)); } .tier-burst b { position: relative; font-size: 1.25rem; color: var(--ink); } .tier-burst small { position: relative; font-size: .85rem; color: var(--muted); } .tb-glow { position: absolute; left: 50%; top: 3.6rem; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; background: radial-gradient(circle, var(--tb, #FFDA6B) 0%, transparent 70%); opacity: .55; animation: tbGlow 1.6s ease-out .1s backwards; } .tb-rays { position: absolute; left: 50%; top: 3.6rem; width: 0; height: 0; } .tb-rays i { position: absolute; width: .5rem; height: .5rem; margin: -.25rem; border-radius: 2px; background: var(--tb, #FFDA6B); opacity: 0; animation: tbRay 1.1s var(--ease) .25s; } .tb-rays i:nth-child(odd) { background: var(--brand-teal); border-radius: 50%; } .tb-rays i:nth-child(1) { --a: 0deg; } .tb-rays i:nth-child(2) { --a: 36deg; } .tb-rays i:nth-child(3) { --a: 72deg; } .tb-rays i:nth-child(4) { --a: 108deg; } .tb-rays i:nth-child(5) { --a: 144deg; } .tb-rays i:nth-child(6) { --a: 180deg; } .tb-rays i:nth-child(7) { --a: 216deg; } .tb-rays i:nth-child(8) { --a: 252deg; } .tb-rays i:nth-child(9) { --a: 288deg; } .tb-rays i:nth-child(10) { --a: 324deg; } .tier-burst.t-bronze { --tb: #EDB27E; } .tier-burst.t-silver { --tb: #D5DEE3; } .tier-burst.t-gold { --tb: #FFDA6B; } .tier-burst.t-emerald { --tb: #6BE3AE; } @keyframes tbIn { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } } @keyframes tbOut { to { opacity: 0; transform: translate(-50%, -70%) scale(.9); } } @keyframes tbMedal { from { transform: translateY(1.5rem) scale(.2) rotate(-200deg); opacity: 0; } } @keyframes tbGlow { from { transform: scale(.2); opacity: 1; } } @keyframes tbRay { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.3); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-6.5rem) scale(.3); } } @media (prefers-reduced-motion: reduce) { .tier-burst, .tier-burst *, .hud-medal { animation-duration: .01ms !important; animation-delay: 0s !important; } .tb-rays { display: none; } } html.reduced .tier-burst, html.reduced .tier-burst *, html.reduced .hud-medal { animation-duration: .01ms !important; animation-delay: 0s !important; } html.reduced .tb-rays { display: none; } .delta { position: absolute; top: -.4rem; inset-inline-end: -.3rem; font-size: .8rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; color: #fff; animation: deltaUp 1.6s var(--ease) forwards; pointer-events: none; } .delta.up { background: var(--leaf); } .delta.down { background: var(--hot); } @keyframes deltaUp { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } .hud-badge { top: 1rem; inset-inline-start: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; max-width: 60%; } .chip-glass { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .chip-glass.warn { background: rgba(255, 244, 222, .92); color: #8a4b05; } .chip-glass svg { width: 1.1rem; height: 1.1rem; } .hud-tools { bottom: 1rem; inset-inline-end: 1rem; display: flex; flex-direction: column; gap: .5rem; } .hud-tools .grp { display: flex; flex-direction: column; gap: .45rem; padding: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .45); backdrop-filter: blur(8px); } .hud-time { bottom: 1rem; inset-inline-start: 1rem; inset-inline-end: 6rem; max-width: 40rem; display: flex; align-items: center; gap: .8rem; padding: .55rem 1.1rem .55rem .55rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } [dir="rtl"] .hud-time { padding: .55rem .55rem .55rem 1.1rem; } .hud-time .clock { font-weight: 700; font-size: 1.05rem; min-width: 3.6rem; text-align: center; direction: ltr; } .hud-time input { flex: 1; } .hud-legend { top: 5.4rem; inset-inline-end: 1rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line); font-size: .78rem; backdrop-filter: blur(10px); max-width: 16rem; } .hud-legend .grad { height: .6rem; border-radius: 999px; background: linear-gradient(90deg, #2f6f95, #79b4b0, #f3cf5b, #ef8a3a, #d1352b); margin: .35rem 0 .2rem; } [dir="rtl"] .hud-legend .grad { background: linear-gradient(270deg, #2f6f95, #79b4b0, #f3cf5b, #ef8a3a, #d1352b); } .hud-legend .row { display: flex; justify-content: space-between; color: var(--muted); } .hud-legend .wind-row { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--brand); } .hud-legend svg { width: 1.2rem; height: 1.2rem; flex: none; } .hud-tools .icon-btn { width: 2.9rem; height: 2.9rem; } .hud-tools .icon-btn svg { width: 1.2rem; height: 1.2rem; } .stage-hint { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; transition: opacity .4s; } /* range sliders */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 2.6rem; background: transparent; width: 100%; margin: 0; touch-action: none; } input[type="range"]::-webkit-slider-runnable-track { height: .55rem; border-radius: 999px; background: linear-gradient(90deg, #1c3550, #f6c79a 12%, #ffd25e 50%, #f1a676 85%, #1c3550); } input[type="range"]::-moz-range-track { height: .55rem; border-radius: 999px; background: linear-gradient(90deg, #1c3550, #f6c79a 12%, #ffd25e 50%, #f1a676 85%, #1c3550); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 2rem; height: 2rem; margin-top: -.72rem; border-radius: 50%; background: #fff; border: 4px solid var(--brand-orange); box-shadow: var(--shadow-sm); } input[type="range"]::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; border: 4px solid var(--brand-orange); } input[type="range"].plain::-webkit-slider-runnable-track { background: rgba(15, 42, 58, .12); } input[type="range"].plain::-moz-range-track { background: rgba(15, 42, 58, .12); } [dir="rtl"] input[type="range"] { direction: ltr; } /* ---------- Compare (before / after) ---------- */ .compare-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .cmp-divider { position: absolute; top: 0; bottom: 0; width: 4px; margin-inline-start: -2px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 42, 58, .15), 0 0 24px rgba(0, 0, 0, .15); } .cmp-handle { position: absolute; top: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); pointer-events: auto; cursor: ew-resize; touch-action: none; color: var(--brand); } .cmp-handle svg { width: 2rem; height: 2rem; } .cmp-tag { position: absolute; top: 1rem; padding: .55rem 1rem; border-radius: 999px; font-weight: 600; font-size: .95rem; color: #fff; box-shadow: var(--shadow-sm); } .cmp-tag.trad { inset-inline-start: 1rem; background: #8a5a44; } .cmp-tag.sus { inset-inline-end: 1rem; background: var(--leaf); top: 5.6rem; } /* ---------- Panel ---------- */ .panel { background: var(--card); border-inline-start: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem 1.6rem 2rem; scroll-behavior: smooth; } .panel-inner { display: flex; flex-direction: column; gap: 1.2rem; animation: panelIn .45s var(--ease); } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .step-kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; } [dir="rtl"] .step-kicker { letter-spacing: 0; } .step-kicker .ico { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: rgba(99, 195, 197, .18); color: var(--brand); } .step-kicker .ico svg { width: 1.2rem; height: 1.2rem; } .panel h2 { font-size: 1.75rem; font-weight: 700; margin-top: .4rem; } .lead { color: var(--ink-2); font-size: 1.02rem; } .section-label { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .55rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; } [dir="rtl"] .section-label { letter-spacing: 0; } .sk-wall { stroke: transparent; stroke-linecap: round; cursor: pointer; } .sk-wall:hover { stroke: rgba(241, 94, 37, .35); } .sk-wall.own { stroke: rgba(28, 90, 122, .4); } .sk-wall.on { stroke: rgba(241, 94, 37, .75); } .sk-wallp { fill: var(--brand); font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: .25; pointer-events: none; } .sk-wallbox { display: grid; gap: .35rem; padding: .55rem .6rem; border-radius: 10px; background: var(--surface); border: 1.5px solid rgba(241, 94, 37, .45); } .sk-wallbox .section-label { margin: 0; } .sk-imgbox { display: grid; gap: .45rem; padding: .65rem .7rem; border-radius: var(--radius-sm); border: 1.5px dashed var(--line-2); background: var(--surface); } .sk-imgbox .section-label { margin: 0; } .sk-imgbox .note { margin: 0; } .sk-imgpick { justify-self: start; cursor: pointer; } .sk-imgrow { display: flex; gap: .6rem; align-items: center; } .sk-thumb { width: 5.5rem; height: 4rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); flex: none; background: #fff; } .sk-imgnote { color: var(--brand-orange); font-weight: 600; } .sk-calrow { display: flex; gap: .5rem; align-items: end; } .sk-calrow .sk-f { flex: 1; } .sk-img { pointer-events: none; } .sk-plan.has-img .sk-b rect, .sk-plan.has-img .sk-b polygon, .sk-plan.has-img .sk-b path { fill-opacity: .55; } .sk-plan.img-move { cursor: move; } .sk-plan.img-cal { cursor: crosshair; } .sk-plan.img-move .sk-b, .sk-plan.img-cal .sk-b, .sk-plan.img-move .sk-h, .sk-plan.img-cal .sk-h { pointer-events: none; } .sk-calpt { fill: var(--brand-orange); stroke: #fff; stroke-width: .12; } .sk-calln { stroke: var(--brand-orange); stroke-width: .12; stroke-dasharray: .4 .25; } .ref-img { top: 6.2rem; inset-inline-end: 1rem; width: min(30%, 16rem); padding: 0; border: 2px solid #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; cursor: zoom-in; transition: width .25s; } .ref-img img { display: block; width: 100%; height: auto; } .ref-img.big { width: min(70%, 40rem); cursor: zoom-out; } .win-blocks { margin-top: .5rem; display: grid; gap: .35rem; justify-items: start; } .win-blocks .note { margin: 0; } .win-hf { margin-top: .45rem; border-top: 1px dashed var(--line-2); padding-top: .4rem; } .win-hf summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--brand); padding: .2rem 0; } .win-hf .slider-row { margin-top: .3rem; } .win-hf .sk-off { opacity: .5; } .link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: .76rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .why-link { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: rgba(241, 94, 37, .1); color: #c2410c; border-radius: 999px; padding: .55rem 1rem; font-weight: 600; font-size: .9rem; align-self: flex-start; min-height: 2.75rem; } .why-link svg { width: 1.15rem; height: 1.15rem; } /* option cards */ .opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .opt-grid.cols-1 { grid-template-columns: 1fr; } .opt-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .opt-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: start; padding: .9rem 1rem; min-height: var(--touch); border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease), background .2s; } .opt-card:hover { border-color: rgba(28, 90, 122, .35); box-shadow: var(--shadow-sm); } .opt-card:active { transform: scale(.98); } .opt-card[aria-pressed="true"] { border-color: var(--brand-teal); background: linear-gradient(180deg, var(--sel-teal), var(--surface)); box-shadow: 0 0 0 4px rgba(99, 195, 197, .2); } .opt-card[aria-pressed="true"]::after { content: '✓'; position: absolute; top: .55rem; inset-inline-end: .6rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--leaf); color: #fff; font-size: .85rem; display: grid; place-items: center; font-weight: 700; } .opt-card .t { font-weight: 600; font-size: 1rem; padding-inline-end: 1.6rem; } .opt-card .d { font-size: .82rem; color: var(--muted); line-height: 1.35; } .opt-card .thumb { width: 100%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #a9d1e8, #f3e3cd); margin-bottom: .3rem; } .opt-card .thumb svg { width: 100%; height: 100%; display: block; } .opt-card .pic { width: 3rem; height: 3rem; flex: none; } .opt-card.row { flex-direction: row; align-items: center; gap: .9rem; } .opt-card.row .txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .opt-card .tag { font-size: .7rem; font-weight: 600; background: rgba(140, 107, 209, .14); color: #6a48b5; padding: .15rem .5rem; border-radius: 999px; } /* segmented */ .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(15, 42, 58, .07); } .seg button { border: 0; background: transparent; border-radius: 999px; min-height: 2.9rem; padding: 0 .6rem; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; font-size: .92rem; } .seg button[aria-pressed="true"] { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow-sm); } /* chips */ .chips { display: flex; flex-wrap: wrap; gap: .55rem; } .chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.05rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 500; transition: all .2s; } .chip .dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: .7rem; } .chip[aria-pressed="true"] { border-color: var(--brand); background: rgba(28, 90, 122, .07); } .chip[aria-pressed="true"] .dot { background: var(--brand-deep); border-color: var(--brand); color: #fff; } .chip[aria-pressed="true"] .dot::after { content: '✓'; } .chip .hot { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; color: #fff; } /* toggles */ .toggle-card { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); text-align: start; width: 100%; transition: border-color .2s, background .2s; } .toggle-card[aria-pressed="true"] { border-color: var(--leaf); background: var(--sel-leaf); } .toggle-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .toggle-card .t { font-weight: 600; } .toggle-card .d { font-size: .82rem; color: var(--muted); } .switch { width: 3.1rem; height: 1.8rem; border-radius: 999px; background: rgba(15, 42, 58, .18); position: relative; flex: none; transition: background .2s; } .switch::after { content: ''; position: absolute; top: .2rem; inset-inline-start: .2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: inset-inline-start .25s var(--ease); } [aria-pressed="true"] > .switch { background: var(--leaf); } [aria-pressed="true"] > .switch::after { inset-inline-start: 1.5rem; } .pic-wrap { width: 3rem; height: 3rem; flex: none; border-radius: 12px; background: var(--soft); display: grid; place-items: center; } .pic-wrap svg { width: 2.4rem; height: 2.4rem; } /* insight */ .insight { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--soft-blue); border: 1px solid rgba(28, 90, 122, .14); font-size: .95rem; animation: pop .35s var(--ease); } .insight .i { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand-deep); color: #fff; } .insight .i svg { width: 1.1rem; height: 1.1rem; } .insight.good { background: var(--leaf-soft); border-color: rgba(46, 158, 107, .25); } .insight.good .i { background: var(--leaf); } .insight.warn { background: var(--tint-amber); border-color: rgba(242, 165, 65, .35); } .insight.warn .i { background: var(--amber); } .insight.bad { background: var(--tint-red); border-color: rgba(228, 87, 46, .3); } .insight.bad .i { background: var(--hot); } @keyframes pop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } /* meters */ .meters { display: grid; gap: .7rem; } .meter-top { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .3rem; } .meter-top b { font-weight: 600; } .meter-track { height: .7rem; border-radius: 999px; background: rgba(15, 42, 58, .08); overflow: hidden; } .meter-fill { height: 100%; border-radius: 999px; transition: width .7s var(--ease), background .4s; } [dir="rtl"] .meter-track { transform: scaleX(-1); } .viz-card { border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); padding: .8rem; overflow: hidden; } .viz-card svg { width: 100%; height: auto; display: block; } .viz-card .cap { font-size: .78rem; color: var(--muted); margin-top: .5rem; display: flex; align-items: center; gap: .4rem; } .badge-exp { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; background: var(--tint-purple); color: #6a48b5; padding: .3rem .7rem; border-radius: 999px; } .note { font-size: .82rem; color: var(--muted); } .kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .kv > div { background: var(--soft); border-radius: 12px; padding: .7rem .8rem; } .kv span { display: block; font-size: .74rem; color: var(--muted); } .kv b { font-size: 1.1rem; } /* dial */ .dial-wrap { display: grid; place-items: center; } .dial { width: min(17rem, 100%); height: auto; touch-action: none; cursor: grab; } .dial-building { transition: transform .5s var(--ease); } .compass-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } .compass-btns button { min-height: 3rem; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 600; } .compass-btns button[aria-pressed="true"] { border-color: var(--brand-orange); color: #c2410c; background: var(--tint-orange); } .exposure-list { display: grid; gap: .5rem; } .exp-row { display: grid; grid-template-columns: 7.5rem 1fr 4.6rem; align-items: center; gap: .6rem; font-size: .88rem; } .exp-row .bar { height: .7rem; border-radius: 999px; background: rgba(15, 42, 58, .08); overflow: hidden; } .exp-row .bar i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease); } [dir="rtl"] .exp-row .bar { transform: scaleX(-1); } .exp-row .lvl { font-size: .78rem; font-weight: 600; text-align: end; } /* status */ .status { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; } .status .dot { width: .9rem; height: .9rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 5px rgba(0, 0, 0, .06); } .status.good { background: var(--leaf-soft); color: #1f7a50; } .status.good .dot { background: var(--leaf); } .status.moderate { background: var(--tint-amber); color: #8a4b05; } .status.moderate .dot { background: var(--amber); } .status.limited { background: var(--tint-red); color: #a33a1c; } .status.limited .dot { background: var(--hot); } /* tools (landscape) */ .tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; } .tool { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); font-size: .82rem; font-weight: 600; text-align: center; min-height: 5.6rem; } .tool svg { width: 2.8rem; height: 2.8rem; } .tool small { font-weight: 400; color: var(--muted); font-size: .7rem; line-height: 1.2; } .tool[aria-pressed="true"] { border-color: var(--brand-orange); background: var(--tint-orange); } /* compare bars */ .cbars { display: grid; gap: .9rem; } .cbar .lbl { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .3rem; } .cbar .lbl b { font-weight: 600; } .cbar .track { display: grid; gap: 4px; } .cbar .b { height: .75rem; border-radius: 999px; transition: width .8s var(--ease); min-width: 4px; } .cbar .b.t { background: #b8826a; } .cbar .b.s { background: var(--leaf); } .legend-dots { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); } .legend-dots i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-inline-end: .35rem; vertical-align: middle; } .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .kpi { padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--soft); } .kpi b { display: block; font-size: 1.45rem; font-weight: 700; color: var(--brand); direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .kpi b { text-align: right; } .kpi span { font-size: .78rem; color: var(--muted); } .value-chips { display: flex; flex-wrap: wrap; gap: .45rem; } .value-chips span { padding: .4rem .8rem; border-radius: 999px; background: var(--leaf-soft); color: #1f7a50; font-size: .82rem; font-weight: 600; } /* score */ .score-hero { display: flex; align-items: center; gap: 1.3rem; } .score-hero .ring-wrap { position: relative; width: 9rem; height: 9rem; flex: none; } .score-hero .ring { width: 100%; height: 100%; } .score-hero .ring-num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .score-hero .ring-num b { font-size: 2.6rem; font-weight: 700; line-height: 1; } .score-hero .ring-num small { display: block; font-size: .8rem; color: var(--muted); } .rating-tag { display: inline-block; padding: .35rem .9rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: .9rem; } .cat-list { display: grid; gap: .65rem; } .cat { display: grid; grid-template-columns: 1.8rem 1fr auto; align-items: center; gap: .6rem; } .cat .ci { width: 1.8rem; height: 1.8rem; border-radius: 8px; display: grid; place-items: center; background: var(--soft-blue); color: var(--brand); } .cat .ci svg { width: 1.05rem; height: 1.05rem; } .cat .nm { font-size: .88rem; display: flex; justify-content: space-between; gap: .4rem; } .cat .nm small { color: var(--muted); font-size: .72rem; } .cat .v { font-weight: 700; min-width: 2.2rem; text-align: end; } .cat .bar { grid-column: 2 / 3; height: .55rem; border-radius: 999px; background: rgba(15, 42, 58, .08); overflow: hidden; margin-top: .25rem; } .cat .bar i { display: block; height: 100%; border-radius: 999px; transition: width .8s var(--ease); } [dir="rtl"] .cat .bar { transform: scaleX(-1); } .tips { display: grid; gap: .5rem; } .tip { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem .9rem; border-radius: 12px; background: #FFF6EE; font-size: .88rem; } .tip button { flex: none; } /* quiz list */ .qlist { display: grid; gap: .45rem; } .qrow { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 12px; background: var(--soft); font-size: .88rem; } .qrow .st { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; background: #b9c3c9; font-size: .8rem; } .qrow.ok .st { background: var(--leaf); } .qrow.no .st { background: var(--hot); } .badge-row { display: flex; flex-wrap: wrap; gap: .5rem; } .bdg { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem .45rem .45rem; border-radius: 999px; background: var(--soft); font-size: .82rem; font-weight: 600; opacity: .45; filter: grayscale(1); } [dir="rtl"] .bdg { padding: .45rem .45rem .45rem .8rem; } .bdg.on { opacity: 1; filter: none; background: var(--tint-amber); } .bdg .e { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 1.05rem; } /* AWH */ .awh-box { border-radius: var(--radius); border: 2px dashed rgba(140, 107, 209, .4); background: var(--tint-purple-2); padding: 1rem; display: grid; gap: .8rem; } .awh-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .awh-readout > div { background: var(--surface); border-radius: 12px; padding: .6rem .75rem; border: 1px solid var(--line); } .awh-readout span { display: block; font-size: .72rem; color: var(--muted); } .awh-readout b { font-size: 1.05rem; direction: ltr; unicode-bidi: isolate; } .awh-pot b { color: var(--c); } .slider-row { display: grid; grid-template-columns: 8rem 1fr 3.6rem; align-items: center; gap: .6rem; font-size: .85rem; } .slider-row b { text-align: end; direction: ltr; } /* free mode accordion */ .acc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; } .acc + .acc { margin-top: .6rem; } .acc summary { list-style: none; display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; font-weight: 600; cursor: pointer; min-height: var(--touch); } .acc summary::-webkit-details-marker { display: none; } .acc summary .ico { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(99, 195, 197, .18); color: var(--brand); } .acc summary .ico svg { width: 1.1rem; height: 1.1rem; } .acc summary .val { margin-inline-start: auto; font-weight: 400; font-size: .8rem; color: var(--muted); max-width: 50%; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acc summary::after { content: '+'; font-size: 1.3rem; color: var(--muted); } .acc[open] summary::after { content: '–'; } .acc .acc-body { padding: 0 1rem 1rem; display: grid; gap: .9rem; } /* ---------- Bottom bar ---------- */ .bottombar { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.4rem; background: rgba(255, 255, 255, .92); border-top: 1px solid var(--line); backdrop-filter: blur(14px); z-index: 4; } .bottombar .mid { flex: 1; display: flex; justify-content: center; gap: .6rem; align-items: center; } .bottombar .mark { height: 1.6rem; opacity: .85; } .bottombar .btn-next { min-width: 11rem; } /* ===================================================================== OVERLAYS ===================================================================== */ .modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.5rem; background: rgba(9, 24, 33, .48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .25s ease; } .modal-card:focus { outline: none; } .modal-card { width: min(44rem, 100%); max-height: calc(100dvh - 3rem); overflow-y: auto; background: var(--surface); border-radius: 28px; padding: 2rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); animation: rise .35s var(--ease); position: relative; } .modal-card.wide { width: min(60rem, 100%); } .modal-close { position: absolute; top: 1rem; inset-inline-end: 1rem; } .modal-card h3 { font-size: 1.6rem; margin-bottom: .8rem; padding-inline-end: 3rem; } .modal-card h3 > svg { width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-inline-end: .2rem; color: var(--brand-teal); } .modal-card .body { display: grid; gap: 1rem; font-size: 1.02rem; color: var(--ink-2); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } } /* quiz */ .quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .quiz-top .badge-q { white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; background: #FFF1E9; color: #c2410c; font-weight: 600; font-size: .85rem; } .quiz-q { font-size: 1.45rem; font-weight: 600; line-height: 1.3; margin-bottom: 1.2rem; } .quiz-opts { display: grid; gap: .65rem; } .quiz-opt { display: flex; align-items: center; gap: .9rem; text-align: start; min-height: 4rem; padding: .8rem 1.1rem; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); font-size: 1.05rem; transition: all .2s; } .quiz-opt .k { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--soft-blue); font-weight: 700; color: var(--brand); } .quiz-opt:hover:not([disabled]) { border-color: var(--brand-teal); } .quiz-opt.correct { border-color: var(--leaf); background: var(--leaf-soft); } .quiz-opt.correct .k { background: var(--leaf); color: #fff; } .quiz-opt.wrong { border-color: var(--hot); background: var(--tint-red); animation: shake .4s; } .quiz-opt.wrong .k { background: var(--hot); color: #fff; } .quiz-opt[disabled] { cursor: default; } .quiz-fb { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 16px; animation: pop .3s var(--ease); } .quiz-fb.ok { background: var(--leaf-soft); } .quiz-fb.no { background: var(--tint-amber); } .quiz-fb h4 { font-size: 1.2rem; margin-bottom: .35rem; } .quiz-fb.ok h4 { color: #1f7a50; } .quiz-fb.no h4 { color: #a33a1c; } .quiz-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; gap: 1rem; } @keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* drawer */ .drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(28rem, 100%); z-index: 25; background: var(--surface); box-shadow: -20px 0 60px rgba(0, 0, 0, .15); padding: 1.6rem; overflow-y: auto; animation: slideIn .35s var(--ease); } [dir="rtl"] .drawer { box-shadow: 20px 0 60px rgba(0, 0, 0, .15); animation-name: slideInR; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } } @keyframes slideInR { from { transform: translateX(-100%); } to { transform: none; } } .drawer h3 { font-size: 1.5rem; margin-bottom: 1rem; } .sum-list { display: grid; gap: .1rem; margin-bottom: 1.2rem; } .sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; } .sum-row span { color: var(--muted); } .sum-row b { font-weight: 600; text-align: end; } .perf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .perf > div { padding: .8rem; border-radius: 12px; background: var(--soft); } .perf span { display: block; font-size: .75rem; color: var(--muted); } .perf b { font-size: 1.05rem; } /* ---------- Undo / redo (bottom bar) ---------- */ .hist-btns { display: flex; gap: .3rem; padding-inline-end: .5rem; border-inline-end: 1px solid var(--line); } .hist-btns .icon-btn { width: 2.75rem; height: 2.75rem; background: var(--surface); } .hist-btns .icon-btn svg { width: 1.15rem; height: 1.15rem; } .hist-btns .icon-btn:disabled { opacity: .35; cursor: default; } /* ---------- Challenges (style step, collapsible) ---------- */ .ch-wrap { border-radius: var(--radius-sm); border: 2px dashed var(--line-2); padding: .2rem .9rem; } .ch-wrap[open] { padding-bottom: .9rem; border-style: solid; border-color: var(--line); } .ch-wrap summary { display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; cursor: pointer; list-style: none; } .ch-wrap summary::-webkit-details-marker { display: none; } .ch-wrap summary > svg { width: 1.25rem; height: 1.25rem; color: var(--brand-orange); flex: none; } .ch-wrap summary span { display: flex; flex-direction: column; } .ch-wrap summary small { color: var(--muted); font-size: .8rem; } .ch-wrap .ch-grid { margin-top: .5rem; } /* ---------- Find your land ---------- */ .land-form { display: grid; gap: .5rem; } .land-field { display: flex; gap: .4rem; padding: .35rem; padding-inline-start: 1rem; border-radius: 999px; background: var(--surface); border: 2px solid var(--line-2); transition: border-color .2s, box-shadow .2s; } .land-field:focus-within { border-color: var(--brand-teal); box-shadow: 0 0 0 4px rgba(99, 195, 197, .22); } .land-field:has(input.err) { border-color: var(--hot); } .land-field input { flex: 1; width: 0; min-width: 0; min-height: 3rem; border: 0; background: none; font: inherit; font-size: 1.25rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); } .land-field input:focus-visible { outline: none; } [dir="rtl"] .land-field input, [dir="rtl"] .lock-field input, [dir="rtl"] .admin-pw input { text-align: right; } /* typed text stays LTR, the field reads from the right */ .land-field input::placeholder { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: #9aaab3; } .land-field .btn { flex: none; min-height: 3rem; } .land-form .note .why-link { min-height: 2.2rem; padding: .3rem .8rem; margin-inline-start: .3rem; vertical-align: middle; } .land-busy { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--soft); color: var(--ink-2); font-weight: 600; } .spin { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 3px solid rgba(28, 90, 122, .2); border-top-color: var(--brand); animation: spin .8s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } .land-view .seg { max-width: 18rem; } .land-card { padding: .5rem; } .land-plan { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; background: #3b4a3f; font-family: inherit; } .land-edge { cursor: pointer; } .land-villa { cursor: grab; touch-action: none; } .land-villa.dragging { cursor: grabbing; } .land-villa.dragging polygon { fill-opacity: .7; } .land-drag-note .why-link { min-height: 2.2rem; padding: .3rem .8rem; margin-inline-start: .3rem; vertical-align: middle; } .land-edge:hover { stroke: rgba(255, 194, 75, .45); } .land-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem .3rem .2rem; font-size: .8rem; color: var(--ink-2); } .land-legend span { display: inline-flex; align-items: center; gap: .35rem; } .land-legend i { width: 1.1rem; height: .75rem; border-radius: 3px; display: inline-block; } .land-legend .lg-plot { border: 2px solid var(--brand-orange); background: rgba(241, 94, 37, .14); } .land-legend .lg-build { border: 2px dashed var(--leaf); background: rgba(46, 158, 107, .12); } .land-legend .lg-villa { background: var(--brand-deep); } .land-legend .lg-street { height: .3rem; background: var(--sun); } .land-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); } .land-kv b { font-size: 1rem; } .land-kv small { font-size: .78rem; color: var(--muted); font-weight: 500; } .land-src { font-size: .76rem; } .land-export { display: flex; flex-wrap: wrap; gap: .5rem; } /* ---------- Cost settings (admin) ---------- */ .hero-admin svg { width: 1.05rem; height: 1.05rem; } .modal-card.admin-card { width: min(68rem, 100%); } .modal-card.admin-card h3 { display: flex; align-items: center; gap: .6rem; } .modal-card.admin-card h3 svg { width: 1.6rem; height: 1.6rem; color: var(--brand); } .admin-lock { max-width: 32rem; } .admin-pw { display: flex; gap: .4rem; padding: .35rem; padding-inline-start: 1rem; border-radius: 999px; border: 2px solid var(--line-2); background: var(--surface); } .admin-pw:focus-within { border-color: var(--brand-teal); box-shadow: 0 0 0 4px rgba(99, 195, 197, .22); } .admin-pw:has(input.err) { border-color: var(--hot); animation: shake .4s; } .admin-pw input { flex: 1; width: 0; min-width: 0; min-height: 3rem; border: 0; background: none; font: inherit; font-size: 1.2rem; font-weight: 600; letter-spacing: .12em; color: var(--ink); } .admin-pw input:focus-visible { outline: none; } .admin-pw input::placeholder { font-size: 1rem; font-weight: 400; letter-spacing: 0; } [dir="rtl"] .admin-pw input:placeholder-shown { direction: rtl; } .admin-pw .btn { flex: none; min-height: 3rem; } .admin-msg { min-height: 1.3rem; font-size: .92rem; font-weight: 600; color: var(--hot); } .admin-preview { position: sticky; top: -2rem; z-index: 2; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--leaf-soft); color: #1f6b49; font-weight: 600; } .adm-flags { display: grid; gap: .6rem; } .adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .9rem; align-items: start; } .adm-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .9rem .8rem; display: grid; gap: .35rem; min-width: 0; } .adm-group legend { padding: 0 .4rem; font-weight: 700; color: var(--brand); font-size: .95rem; } .adm-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .3rem .4rem; border-radius: 10px; } .adm-row.changed { background: var(--tint-amber); } .adm-l { font-size: .9rem; color: var(--ink); line-height: 1.3; } .adm-u { grid-column: 1; font-size: .72rem; color: var(--muted); } .adm-row input { grid-row: 1 / span 2; grid-column: 2; width: 100%; min-height: 2.75rem; padding: 0 .7rem; border-radius: 10px; border: 1.5px solid var(--line-2); font: inherit; font-weight: 600; text-align: end; color: var(--ink); background: var(--surface); } .adm-row input:focus-visible { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(99, 195, 197, .25); } .adm-row input.err { border-color: var(--hot); background: var(--tint-red-2); } .admin-actions { display: flex; flex-wrap: wrap; gap: .6rem; } /* ---------- Materials & colours ---------- */ .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; } .sw { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-height: 5.6rem; padding: .55rem .2rem .45rem; border-radius: var(--radius-sm); border: 2px solid transparent; background: var(--surface); color: var(--ink-2); font-size: .74rem; transition: border-color .2s, background .2s; } .sw:hover { background: var(--soft); } .sw-dot { width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 42, 58, .16), 0 2px 6px rgba(15, 42, 58, .1); } .sw[aria-pressed="true"] { border-color: var(--brand-teal); background: var(--sel-teal); } .sw[aria-pressed="true"] .sw-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-teal); } .sw-name { font-weight: 600; line-height: 1.15; text-align: center; } .sw-temp { font-size: .72rem; font-weight: 700; } .mchips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; } .mc { padding: .15rem .55rem; border-radius: 999px; background: rgba(15, 42, 58, .06); color: var(--ink-2); font-size: .7rem; font-weight: 600; } .mc.good { background: var(--leaf-soft); color: #1f7a50; } .mtest { display: grid; gap: .9rem; padding: 1rem 1.1rem; background: var(--tint-amber-2); border-color: rgba(242, 165, 65, .3); } .mt-head { display: flex; flex-direction: column; gap: .15rem; } .mt-head b { display: inline-flex; align-items: center; gap: .4rem; color: #8a4b05; } .mt-head svg { width: 1.1rem; height: 1.1rem; } .mt-row { display: grid; gap: .45rem; } .mt-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; } .mt-lbl b { font-size: 1.35rem; } .mt-bar { position: relative; height: .75rem; margin: 0 .6rem 1.5rem; border-radius: 999px; background: linear-gradient(90deg, #2f6f95, #79b4b0 22%, #f3cf5b 50%, #ef8a3a 75%, #d1352b); } .mt-ref { position: absolute; top: 100%; transform: translateX(-50%); font-style: normal; text-align: center; } .mt-ref::before { content: ''; display: block; width: 2px; height: .45rem; margin: 0 auto .1rem; background: rgba(15, 42, 58, .35); } .mt-ref small { font-size: .66rem; color: var(--muted); white-space: nowrap; } .mt-pin { position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; border: 4px solid var(--ink); transform: translate(-50%, -50%); box-shadow: var(--shadow-sm); animation: mtPin .9s var(--ease) both; } @keyframes mtPin { from { left: 0; } } .spec-list { display: grid; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .spec-row { display: grid; grid-template-columns: minmax(6rem, .8fr) minmax(0, 1.5fr) auto; gap: .6rem; align-items: center; padding: .55rem .9rem; font-size: .88rem; } .spec-row + .spec-row { border-top: 1px solid var(--line); } .spec-row > span { color: var(--muted); } .spec-row b { font-weight: 600; } .spec-edit { min-height: 2.3rem; padding: 0 .8rem; border: 0; border-radius: 999px; background: rgba(28, 90, 122, .08); color: var(--brand); font-size: .78rem; font-weight: 600; } .spec-edit:hover { background: rgba(28, 90, 122, .15); } .size-card { align-items: center; text-align: center; padding: .7rem .5rem; } .size-card .t { padding-inline-end: 0; } .size-pic svg { width: 4rem; height: 2.5rem; display: block; } .cost-card { display: grid; gap: .55rem; padding: 1rem 1.1rem; } .cost-wait { border: 2px dashed var(--line); background: var(--soft); } .cost-wait .note { margin: 0; } .cc-areas b { font-size: .95rem; } /* size: a share of the plot area */ .size-pct { margin-top: .75rem; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); display: grid; gap: .5rem; } .size-pct.on { border-color: var(--brand-teal); background: linear-gradient(180deg, var(--sel-teal), var(--surface)); box-shadow: 0 0 0 4px rgba(99, 195, 197, .2); } .size-pct label { font-weight: 600; } .size-pct-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .pct-field { position: relative; display: inline-flex; align-items: center; } .pct-field input { width: 6.5rem; min-height: 2.75rem; padding: .4rem 2rem .4rem .8rem; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: 1.1rem; font-weight: 700; text-align: center; } .pct-field input:focus { outline: none; border-color: var(--brand-teal); } .pct-field input.err { border-color: var(--hot); } .pct-field i { position: absolute; right: .75rem; font-style: normal; font-weight: 700; color: var(--muted); pointer-events: none; } .size-pct .note { margin: 0; } .size-sec { display: grid; gap: .1rem; padding-top: .9rem; border-top: 1px solid var(--line); } .sub-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.1rem; color: var(--brand); } .sub-head svg { width: 1.25rem; height: 1.25rem; } .ph-box { display: grid; gap: .55rem; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); } .ph-box.on { border-color: var(--brand-teal); background: linear-gradient(180deg, var(--sel-teal), var(--surface)); } .ph-box .note { margin: 0; } .cc-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .cc-head b { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); } .cc-head svg { width: 1.15rem; height: 1.15rem; } .cc-tier { padding: .2rem .7rem; border-radius: 999px; color: #fff; font-size: .78rem; font-weight: 700; } .cc-tier.t0, .cc-gauge i.on.t0 { background: var(--leaf); } .cc-tier.t1, .cc-gauge i.on.t1 { background: var(--brand-teal); } .cc-tier.t2, .cc-gauge i.on.t2 { background: var(--amber); } .cc-tier.t3, .cc-gauge i.on.t3 { background: var(--hot); } .cc-gauge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .cc-gauge i { height: .55rem; border-radius: 999px; background: rgba(15, 42, 58, .1); } .cc-total { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .cc-total b { font-size: 1.4rem; } .cc-total span { font-size: .8rem; color: var(--muted); } .cc-split { display: flex; height: .45rem; border-radius: 999px; overflow: hidden; background: rgba(15, 42, 58, .1); } .cc-split span { background: rgba(28, 90, 122, .35); } .cc-split span.g { background: var(--leaf); } .ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; } .ch-card { display: flex; flex-direction: column; gap: .45rem; padding: .85rem .9rem; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); } .ch-card.on { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(28, 90, 122, .1); } .ch-card.won { border-color: rgba(46, 158, 107, .45); background: var(--sel-leaf); } .ch-top { display: flex; align-items: center; gap: .5rem; } .ch-ico { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(28, 90, 122, .1); color: var(--brand); } .ch-ico svg { width: 1rem; height: 1rem; } .ch-card.won .ch-ico { background: var(--leaf); color: #fff; } .ch-bar { height: .4rem; border-radius: 999px; background: rgba(15, 42, 58, .08); overflow: hidden; } .ch-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-teal), var(--leaf)); transition: width .4s var(--ease); } .ch-conds { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .78rem; color: var(--muted); } .ch-conds li.ok { color: #1f7a50; font-weight: 600; } .ch-card .btn { align-self: flex-start; margin-top: auto; } .ch-chip { color: var(--brand); } .ch-chip.won { background: rgba(228, 244, 235, .95); color: #1f7a50; } /* ---------- Villa card & hall of fame ---------- */ .vcard-wrap { position: fixed; inset: 0; z-index: 14; overflow-y: auto; padding: clamp(1rem, 3vw, 2.5rem); background: radial-gradient(120% 80% at 70% 0%, #1e5f80 0%, #0f2a3a 55%, #0a1d28 100%); } .vcard-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1.4rem; max-width: 64rem; margin: 0 auto; } .vcard { width: min(34rem, 100%); border-radius: 28px; overflow: hidden; background: #F3F0EA; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); animation: rise .5s var(--ease); } .vc-hero { position: relative; aspect-ratio: 800 / 540; } .vc-hero > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .vc-logo { position: absolute; top: 1rem; inset-inline-start: 1.1rem; height: 2.1rem; } .vc-score { position: absolute; top: .9rem; inset-inline-end: .9rem; display: grid; justify-items: center; gap: .15rem; padding: .45rem .55rem .4rem; border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: var(--shadow-sm); } .vc-score .ring-wrap { position: relative; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; } .vc-score .ring { position: absolute; inset: 0; width: 100%; height: 100%; } .vc-score b { font-size: 1.45rem; } .vc-score small { font-size: .7rem; font-weight: 600; color: var(--brand); } .vc-score .vc-medal { position: absolute; bottom: -.35rem; inset-inline-start: -.55rem; width: 1.9rem; height: auto; filter: drop-shadow(0 3px 5px rgba(15, 42, 58, .3)); } .vc-score .vc-tier { color: var(--muted); font-weight: 500; font-size: .66rem; margin-top: -.1rem; } .vc-body { display: grid; gap: .8rem; padding: 1.2rem 1.3rem 1.3rem; } .vc-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--leaf); } .vc-kicker svg { width: 1rem; height: 1rem; } .vc-name { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin-top: -.4rem; } .vc-sub { font-size: .85rem; color: var(--ink-2); margin-top: -.3rem; } .vc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .vc-stats div { padding: .55rem .6rem; border-radius: 14px; background: #fff; } .vc-stats span { display: block; font-size: .68rem; color: var(--muted); } .vc-stats b { font-size: .9rem; } .vc-ch { display: flex; flex-wrap: wrap; gap: .35rem; } .vc-ch span { padding: .2rem .65rem; border-radius: 999px; background: var(--leaf-soft); color: #1f7a50; font-size: .75rem; font-weight: 600; } .vc-foot { display: flex; align-items: center; gap: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line-2); } .vc-foot b { color: var(--brand); } .vc-foot p { font-size: .8rem; color: var(--ink-2); margin-top: .2rem; } .qr-box { flex: none; width: 7.5rem; padding: .35rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); } .qr-box svg { display: block; width: 100%; height: auto; } .phone-card .qr-box { width: 8rem; } .vcard-actions { width: min(19rem, 100%); display: grid; gap: .7rem; padding: 1.2rem; border-radius: 24px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; } .vcard-actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); } .vcard-actions .btn-ghost:hover { background: rgba(255, 255, 255, .08); } .vcard-actions .btn-soft { background: rgba(255, 255, 255, .14); color: #fff; } .vcard-actions .note { color: rgba(255, 255, 255, .75); } .vcard-actions .lang-switch { background: rgba(255, 255, 255, .12); justify-self: start; } .vcard-actions .lang-switch button { color: rgba(255, 255, 255, .85); } .vcard-actions .lang-switch button[aria-pressed="true"] { color: var(--ink); } .vc-label { font-weight: 600; } .vc-name-row { display: flex; gap: .5rem; } .vc-name-row input { flex: 1; min-width: 0; min-height: 3rem; padding: 0 1rem; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .25); background: #fff; color: var(--ink); font: inherit; font-weight: 600; } .vc-name-row .icon-btn { flex: none; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; } .dims .dim-line { stroke: #0F2A3A; stroke-width: 1.6; opacity: .75; } .dims .dim-ext { stroke: #0F2A3A; stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; } .dims .dim-end { fill: #0F2A3A; opacity: .8; } .dim-chip rect { fill: #1C5A7A; } .dim-chip text { fill: #fff; font-size: 12px; font-weight: 600; } .scrim { position: fixed; inset: 0; z-index: 24; background: rgba(9, 24, 33, .3); } /* menu */ .menu-pop { position: fixed; top: 4.6rem; inset-inline-end: 1rem; z-index: 26; width: 19rem; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: .5rem; animation: rise .25s var(--ease); } .menu-pop button { display: flex; align-items: center; gap: .8rem; width: 100%; border: 0; background: none; text-align: start; padding: .8rem .9rem; border-radius: 12px; min-height: 3rem; font-weight: 500; } .menu-pop button:hover { background: var(--soft); } .menu-pop button svg { width: 1.2rem; height: 1.2rem; color: var(--brand); flex: none; } .menu-pop button .state { margin-inline-start: auto; font-size: .75rem; color: var(--muted); } .menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: .3rem .5rem; } /* toasts */ .toasts { position: fixed; top: 5.5rem; left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: .6rem; pointer-events: none; } .toast { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.3rem .8rem .8rem; border-radius: 999px; background: #0F2A3A; color: #fff; box-shadow: var(--shadow); animation: toastIn .5s var(--ease), toastOut .5s ease 3.2s forwards; font-weight: 500; } [dir="rtl"] .toast { padding: .8rem .8rem .8rem 1.3rem; } .toast .e { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: #FFC24B; font-size: 1.3rem; } .toast small { display: block; opacity: .75; font-size: .78rem; } @keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.95); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } } /* demo banner */ /* docked over the bottom bar while the tour runs (navigation is idle then) */ .demo-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 23; min-height: var(--bb-h, 4.6rem); display: flex; align-items: center; gap: 1rem; padding: .6rem 1.4rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(15, 42, 58, .97); color: #fff; box-shadow: 0 -10px 30px rgba(15, 42, 58, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: dbIn .35s var(--ease); } @keyframes dbIn { from { transform: translateY(100%); } to { transform: none; } } .demo-banner .db-tag { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .85rem; font-weight: 600; color: #9fd9db; } .demo-banner .rec { width: .65rem; height: .65rem; border-radius: 50%; background: var(--brand-orange); box-shadow: 0 0 0 4px rgba(241, 94, 37, .25); animation: blink 1.2s infinite; flex: none; } .demo-banner .cap { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo-banner .db-stop { flex: none; min-height: 3rem; } .demo-banner .db-stop svg { width: 1.05rem; height: 1.05rem; } .demo-banner .db-progress { position: absolute; inset-inline-start: 0; top: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--brand-teal); transition: width .6s var(--ease); } @keyframes blink { 50% { opacity: .3; } } /* story */ .story-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; } .story-card .kick { color: var(--brand-orange); font-weight: 600; margin-bottom: .6rem; } .story-card h3 { font-size: 2rem; padding: 0; } .story-card p { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-2); } .story-stats { display: grid; gap: .8rem; } .story-stats div { background: var(--soft); border-radius: 18px; padding: 1.1rem 1.2rem; } .story-stats b { display: block; font-size: 2.3rem; color: var(--brand); font-weight: 700; direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .story-stats b { text-align: right; direction: rtl; } .story-stats span { color: var(--muted); font-size: .9rem; } .story-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; } .story-dots { display: flex; gap: .4rem; } .story-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line-2); } .story-dots i.on { background: var(--brand-orange); width: 1.6rem; border-radius: 999px; } .src { font-size: .75rem; color: var(--muted); margin-top: .8rem; } /* about */ .about-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .about-table td { padding: .55rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; } .about-table td:first-child { color: var(--muted); width: 45%; } .tariff-row { display: flex; gap: 1rem; flex-wrap: wrap; } .tariff-row label { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); } .tariff-row input { min-height: 2.8rem; border-radius: 12px; border: 1.5px solid var(--line-2); padding: 0 .8rem; font: inherit; width: 9rem; } /* ===================================================================== RESULTS ===================================================================== */ .results { position: fixed; inset: 0; z-index: 12; overflow-y: auto; background: radial-gradient(120% 80% at 70% 0%, #1e5f80 0%, #0f2a3a 55%, #0a1d28 100%); color: #fff; } .results-inner { max-width: 82rem; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; display: grid; gap: 1.6rem; } .res-top { display: flex; justify-content: space-between; align-items: center; } .res-top img { height: 2.6rem; } .res-logo { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px; transition: opacity .2s; } .res-logo:hover { opacity: .85; } .res-logo img { display: block; } .res-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; } .res-villa { border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #8dbfdc, #f6d7b5 60%, #efe2cb); aspect-ratio: 16/11; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); } .res-villa svg { width: 100%; height: 100%; display: block; } .res-title .congrats { display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: rgba(255, 194, 75, .16); color: #FFD27A; font-weight: 600; margin-bottom: 1rem; } .res-title h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 700; } .res-rings { display: flex; gap: 1.4rem; margin-top: 1.6rem; flex-wrap: wrap; } .res-ring { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem 1rem 1rem; border-radius: 24px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); } [dir="rtl"] .res-ring { padding: 1rem 1rem 1rem 1.3rem; } .res-ring .ring-wrap { position: relative; width: 6.5rem; height: 6.5rem; } .res-ring .ring { width: 100%; height: 100%; } .res-ring .ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; } .res-ring small { display: block; opacity: .7; } .res-ring b { font-size: 1.15rem; } .res-tier { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: .8rem 1.3rem .8rem .9rem; border-radius: 22px; background: linear-gradient(120deg, rgba(255, 218, 107, .16), rgba(99, 195, 197, .1)); border: 1px solid rgba(255, 255, 255, .14); } [dir="rtl"] .res-tier { padding: .8rem .9rem .8rem 1.3rem; } .res-tier .medal.big { width: 4.2rem; height: auto; flex: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)); animation: tbMedal 1.2s cubic-bezier(.2, 1.4, .4, 1) .5s backwards; } .res-tier small { display: block; opacity: .7; font-size: .8rem; } .res-tier b { display: block; font-size: 1.25rem; color: #FFE39A; } .res-tier em { display: block; font-style: normal; font-size: .82rem; opacity: .75; margin-top: .2rem; } .res-tier.none b { color: #fff; } .res-ladder { display: flex; gap: .3rem; margin-top: .35rem; } .res-ladder span { width: 1.35rem; opacity: .28; filter: grayscale(1); transition: opacity .3s; } .res-ladder span.on { opacity: 1; filter: none; } .res-ladder .medal { width: 100%; height: auto; display: block; } @media (prefers-reduced-motion: reduce) { .res-tier .medal.big { animation: none; } } html.reduced .res-tier .medal.big { animation: none; } .res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .res-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 1.3rem 1.4rem; } .res-card h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: .9rem; font-weight: 600; } [dir="rtl"] .res-card h4 { letter-spacing: 0; } .res-list { display: grid; gap: .55rem; } .res-list div { display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; } .res-list .ck { color: #7ee2a8; font-weight: 700; } .res-list span { opacity: .7; min-width: 6.5rem; } .res-list .ck { min-width: 0; opacity: 1; } .results .lang-switch button { color: rgba(255,255,255,.8); } .results .lang-switch button[aria-pressed="true"] { color: var(--ink); } .res-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } .res-badge { text-align: center; padding: .7rem .3rem; border-radius: 16px; background: rgba(255, 255, 255, .06); opacity: .35; filter: grayscale(1); transition: all .5s; } .res-badge.on { opacity: 1; filter: none; background: rgba(255, 194, 75, .14); } .res-badge .e { font-size: 1.7rem; display: block; } .res-badge small { font-size: .72rem; display: block; margin-top: .25rem; line-height: 1.2; } .res-ctas { display: flex; flex-wrap: wrap; gap: .8rem; } .res-ctas .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); } .res-ctas .btn-ghost:hover { background: rgba(255, 255, 255, .08); } .phone-card { display: flex; gap: 1rem; align-items: center; } .res-message { text-align: center; padding: 1.4rem 1rem .4rem; display: grid; gap: .9rem; justify-items: center; } .res-message p { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 500; color: #E6F6F6; } .res-message img { height: 2.4rem; opacity: .95; } #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 45; width: 100%; height: 100%; } /* ===================================================================== SVG SCENE STYLES & ANIMATIONS ===================================================================== */ .hour-mark { fill: #7a4a06; font-weight: 600; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; } .sun-rays { animation: spin 40s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .flow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 12 14; animation: flow 1.6s linear infinite; } .flow-around { stroke: rgba(42, 159, 214, .75); } .flow-through { stroke: #18c1a6; stroke-width: 3.4; animation-duration: 1s; } .flow-tower, .flow-stack { stroke: #18c1a6; stroke-width: 3; animation-duration: 1.1s; } @keyframes flow { to { stroke-dashoffset: -52; } } .heat-arrow { stroke-dasharray: 7 6; animation: flow 1.2s linear infinite; } .glow { filter: drop-shadow(0 0 6px rgba(255, 210, 120, .9)); } .pv-live { animation: pvGlow 2.4s ease-in-out infinite; } @keyframes pvGlow { 50% { stroke: #ffd75e; stroke-width: 1.6; } } .sel-ring { animation: flow 3s linear infinite; } .spray { animation: spray 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes spray { 50% { opacity: .5; } } .drip { animation: flow 2.4s linear infinite; } .drop { animation: blink 1.6s infinite; } .ray { animation: flow 2s linear infinite; } .heat-flow line { animation: flow 1.1s linear infinite; } .heat-flow.faded { opacity: .12; } .pipe-live { stroke-dasharray: 10 8; animation: flow 1.4s linear infinite; } .wnode.off, .awh-node.off { opacity: .35; } .lamp-glow { animation: lamp 3s ease-in-out infinite; } @keyframes lamp { 50% { opacity: .82; } } .person { animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-2px); } } .facade-chip.hot rect { stroke: #fff; stroke-width: 2; } /* ===================================================================== LOCK SCREEN — password gate over the faded, still-moving presentation ===================================================================== */ .hero-top-end { display: flex; align-items: center; gap: .6rem; } .lock-out { display: inline-flex; align-items: center; gap: .45rem; min-height: calc(2.5rem + 8px); padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); color: var(--ink-2); font-weight: 600; font-size: .9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, color .2s; } .lock-out:hover { background: #fff; color: #c2410c; } .lock-out svg { width: 1.15rem; height: 1.15rem; flex: none; } .lock { display: none; } html.locked .lock { display: grid; } html.locked .hero-top { visibility: hidden; } /* the lock's own top bar sits exactly in its place */ .lock { position: fixed; inset: 0; z-index: 60; overflow-y: auto; grid-template-rows: 1fr auto; justify-items: center; gap: 1.2rem; padding: 6.6rem clamp(1rem, 4vw, 2.4rem) 1.2rem; background: radial-gradient(62% 58% at 50% 46%, rgba(250, 247, 241, .64) 0%, rgba(243, 240, 234, .86) 68%, rgba(236, 231, 222, .94) 100%); -webkit-backdrop-filter: blur(16px) saturate(.4); backdrop-filter: blur(16px) saturate(.4); animation: lockIn .8s var(--ease); transition: opacity .95s var(--ease), -webkit-backdrop-filter .95s var(--ease), backdrop-filter .95s var(--ease); } @keyframes lockIn { from { opacity: 0; } } .lock-top { position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2.4rem; } .lock-top .logo { height: clamp(3rem, 4.6vw, 5.4rem); width: auto; visibility: hidden; } /* keeps the layout; the logo shows only after signing in */ .lock-body { align-self: center; width: min(46rem, 100%); display: grid; justify-items: center; text-align: center; transition: transform 1s var(--ease); } .lock-body > *, .lock-foot { animation: lockRise .8s var(--ease) backwards; } .lock-body > :nth-child(2) { animation-delay: .06s; } .lock-body > :nth-child(3) { animation-delay: .12s; } .lock-body > :nth-child(4) { animation-delay: .18s; } .lock-body > :nth-child(5) { animation-delay: .26s; } .lock-body > :nth-child(6) { animation-delay: .32s; } .lock-foot { animation-delay: .45s; font-size: .88rem; color: var(--muted); text-align: center; } @keyframes lockRise { from { opacity: 0; transform: translateY(18px); } } .lock-badge { position: relative; width: 4.6rem; height: 4.6rem; margin-bottom: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: 0 14px 34px rgba(28, 90, 122, .18); transition: background .4s, color .4s; } .lock-badge::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from var(--ga), var(--brand-teal), rgba(99, 195, 197, 0) 35%, rgba(241, 94, 37, 0) 55%, var(--brand-orange) 80%, var(--brand-teal)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: gSpin 3.5s linear infinite; } .lock-badge::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; animation: lockPulse 2.6s ease-out infinite; } @keyframes lockPulse { 0% { box-shadow: 0 0 0 0 rgba(99, 195, 197, .45); } 70%, 100% { box-shadow: 0 0 0 1.2rem rgba(99, 195, 197, 0); } } .lock-badge svg { width: 2.1rem; height: 2.1rem; overflow: visible; } .lock-badge .shackle { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); } .lock-badge.err { color: var(--hot); animation: shake .4s; } .lock h1 { font-size: clamp(2.2rem, 4.2vw, 4.4rem); font-weight: 700; color: var(--ink); text-wrap: balance; } .lock h1 .h-alt { display: block; margin-top: .5rem; font-size: .46em; font-weight: 500; color: var(--brand); } .lock-tag { margin-top: .8rem; font-size: 1.15rem; font-weight: 500; color: var(--brand); } .lock-label { margin-top: 2.2rem; font-weight: 600; color: var(--ink-2); } .lock-field { display: flex; align-items: center; gap: .35rem; width: min(30rem, 100%); margin-top: .8rem; padding: .4rem; padding-inline-start: 1.2rem; border-radius: 999px; background: var(--surface); border: 2px solid transparent; box-shadow: 0 18px 44px rgba(15, 42, 58, .14); transition: border-color .2s, box-shadow .2s; } .lock-field:focus-within { border-color: var(--brand-teal); box-shadow: 0 18px 44px rgba(15, 42, 58, .14), 0 0 0 5px rgba(99, 195, 197, .25); } .lock-field.err { border-color: var(--hot); box-shadow: 0 18px 44px rgba(15, 42, 58, .14), 0 0 0 5px rgba(228, 87, 46, .18); animation: shake .4s; } .lock-field input { flex: 1; width: 0; min-width: 0; min-height: 3.2rem; border: 0; background: none; font: inherit; font-size: 1.25rem; font-weight: 600; letter-spacing: .12em; color: var(--ink); } .lock-field input:focus-visible { outline: none; } .lock-field input::placeholder { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: #9aaab3; } [dir="rtl"] .lock-field input:placeholder-shown { direction: rtl; } .lock-eye { width: 2.9rem; height: 2.9rem; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); transition: background .2s, color .2s; } .lock-eye:hover { background: rgba(15, 42, 58, .06); color: var(--ink); } .lock-eye svg { width: 1.3rem; height: 1.3rem; } .lock-eye .slash { opacity: 0; transition: opacity .2s; } .lock-eye[aria-pressed="true"] .slash { opacity: 1; } .lock-go { min-height: 3.3rem; padding: 0 1.6rem; flex: none; } .lock-msg { min-height: 1.5em; margin-top: .8rem; font-size: .92rem; font-weight: 500; color: var(--brand); } .lock-msg.err { color: var(--hot); } /* unlock: padlock opens, content lifts away, the veil dissolves */ .lock.opening { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); transition-delay: .35s; pointer-events: none; } .lock.opening .lock-body { transform: translateY(-16px) scale(.98); transition-delay: .3s; } .lock.opening .lock-badge { background: var(--leaf); color: #fff; } .lock.opening .lock-badge .shackle { transform: translateY(-3.5px); } .lock.opening .lock-field { border-color: var(--leaf); } html.revealing .hero-content > * { animation: revealUp .9s var(--ease) backwards; } html.revealing .hero-content > :nth-child(2) { animation-delay: .07s; } html.revealing .hero-content > :nth-child(3) { animation-delay: .14s; } html.revealing .hero-content > :nth-child(4) { animation-delay: .21s; } html.revealing .hero-content > :nth-child(5) { animation-delay: .28s; } html.revealing .hero-content > :nth-child(6) { animation-delay: .35s; } html.revealing .hero-content > :nth-child(7) { animation-delay: .42s; } html.revealing .hero-foot { animation: revealUp .9s var(--ease) .5s backwards; } html.revealing .gift-fab { animation: giftGrad 6s linear infinite, giftRing 2.4s ease-out infinite, giftBob 3s ease-in-out infinite, revealPop .8s cubic-bezier(.2, 1.4, .4, 1) .6s backwards; } html.revealing #main:not([hidden]), html.revealing #results:not([hidden]) { animation: revealFade .9s ease backwards; } @keyframes revealUp { from { opacity: 0; transform: translateY(22px); } } @keyframes revealPop { from { opacity: 0; transform: scale(.4); } } @keyframes revealFade { from { opacity: 0; } } @media (max-width: 700px) { .lock { padding-top: 6rem; } .lock-out { padding: 0 .85rem; } .lock-out span, .lock-go-txt { display: none; } .lock-go { padding: 0 1.1rem; } } /* ===================================================================== GIFT — discount offers presented by CERSCO ===================================================================== */ @property --ga { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes giftGrad { to { background-position: 200% 0; } } @keyframes giftShine { 0%, 62% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(380%) skewX(-20deg); } } @keyframes giftWiggle { 0%, 60%, 100% { transform: none; } 64% { transform: rotate(-12deg) scale(1.1); } 68% { transform: rotate(10deg) scale(1.1); } 72% { transform: rotate(-7deg) scale(1.05); } 76% { transform: rotate(4deg); } 80% { transform: none; } } @keyframes giftLid { 0%, 62%, 84%, 100% { transform: none; } 70% { transform: translateY(-3px) rotate(-14deg); } 77% { transform: translateY(-1px) rotate(-4deg); } } @keyframes giftRing { 0% { box-shadow: 0 14px 30px rgba(8, 110, 110, .4), 0 0 0 0 rgba(18, 179, 166, .6); } 70%, 100% { box-shadow: 0 14px 30px rgba(8, 110, 110, .4), 0 0 0 1.1rem rgba(18, 179, 166, 0); } } @keyframes giftBob { 50% { transform: translateY(-6px); } } @keyframes giftPop { 50% { transform: scale(1.18) rotate(-10deg); } } /* ---------- Launchers: hero FAB, top-bar button, results banner ---------- */ .gift-fab, .gift-btn, .gift-banner { position: relative; overflow: hidden; isolation: isolate; border: 0; color: #fff; text-align: start; background: linear-gradient(110deg, #0E9E9E 0%, #14B5A6 25%, #2E9E6B 50%, #14B5A6 75%, #0E9E9E 100%); background-size: 200% 100%; animation: giftGrad 6s linear infinite, giftRing 2.4s ease-out infinite; } .gift-fab::after, .gift-btn::after, .gift-banner::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: giftShine 4.5s ease-in-out infinite; } .gift-ico { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-orange); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); animation: giftWiggle 3.2s ease-in-out infinite; } .gift-ico svg { width: 58%; height: 58%; overflow: visible; } .gift-ico .lid, .g-kicker .lid, .g-cta .lid { transform-box: fill-box; transform-origin: 0% 100%; animation: giftLid 3.2s ease-in-out infinite; } .gift-fab { position: absolute; z-index: 3; bottom: 2rem; inset-inline-end: 2rem; display: flex; align-items: center; gap: .85rem; padding: .5rem; border-radius: 999px; animation: giftGrad 6s linear infinite, giftRing 2.4s ease-out infinite, giftBob 3s ease-in-out infinite; } .gift-fab .gift-ico { width: 3.5rem; height: 3.5rem; } .gift-fab-txt { display: flex; flex-direction: column; line-height: 1.25; } .gift-fab-txt b { font-size: 1.15rem; font-weight: 700; } .gift-fab-txt small { font-size: .78rem; opacity: .92; } .gift-fab-pct { width: 2.7rem; height: 2.7rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: #6b3d00; font-weight: 800; font-size: 1.25rem; animation: giftPop 1.6s ease-in-out infinite; } .gift-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: var(--touch); padding: .3rem; padding-inline-end: 1.1rem; border-radius: 999px; font-weight: 600; } .gift-btn .gift-ico { width: 2.6rem; height: 2.6rem; } .gift-banner { display: flex; align-items: center; gap: 1.1rem; width: 100%; padding: 1rem 1.2rem; border-radius: 24px; } .gift-banner .gift-ico { width: 3.8rem; height: 3.8rem; } .gift-banner-txt { flex: 1; min-width: 0; display: grid; gap: .2rem; } .gift-banner-txt b { font-size: 1.45rem; font-weight: 700; } .gift-banner-txt small { font-size: .92rem; opacity: .92; } .gift-banner-logo { flex: none; display: grid; place-items: center; padding: .5rem .85rem; border-radius: 14px; background: #fff; } .gift-banner-logo img { height: 2rem; width: auto; display: block; } .gift-banner-go { width: 2.9rem; height: 2.9rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); } .gift-banner-go svg { width: 1.3rem; height: 1.3rem; } /* ---------- Gift modal ---------- */ .modal-card.gift-card { width: min(68rem, 100%); padding: 1.5rem clamp(1rem, 3vw, 2.2rem) 1.8rem; color: #fff; isolation: isolate; overflow-x: hidden; background: radial-gradient(90% 70% at 100% 0%, rgba(25, 194, 184, .5) 0%, rgba(25, 194, 184, 0) 60%), radial-gradient(80% 60% at 0% 100%, rgba(46, 158, 107, .5) 0%, rgba(46, 158, 107, 0) 60%), linear-gradient(160deg, #075A5D 0%, #05403F 55%, #032A2C 100%); box-shadow: 0 30px 90px rgba(0, 20, 20, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); } .gift-card .modal-close { z-index: 2; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff; } .gift-card .modal-close:hover { background: rgba(255, 255, 255, .26); } .g-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; } .g-leaf { position: absolute; left: var(--x); bottom: -2rem; width: var(--sz); height: var(--sz); border-radius: 0 80% 0 80%; background: linear-gradient(135deg, rgba(126, 226, 168, .55), rgba(46, 158, 107, .2)); animation: gLeaf var(--t) linear infinite var(--dl); } @keyframes gLeaf { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: .7; } 100% { transform: translate(var(--sx), -60rem) rotate(540deg); opacity: 0; } } .g-spark { position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz); background: #FFE7A3; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: gTwinkle var(--t) ease-in-out infinite var(--dl); } @keyframes gTwinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: .9; transform: scale(1) rotate(90deg); } } .g-head { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding-inline-end: 3.6rem; margin-bottom: 1.1rem; } .g-logo { display: grid; place-items: center; padding: .45rem .85rem; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); } .g-logo img { height: 1.9rem; width: auto; display: block; } .g-kicker { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(255, 194, 75, .16); color: #FFD27A; font-weight: 600; font-size: .9rem; } .g-kicker svg { width: 1.15rem; height: 1.15rem; overflow: visible; } .gift-card .g-title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; color: #fff; margin: 0; padding: 0; } .gift-card .g-title em { font-style: normal; background: linear-gradient(90deg, #FFC24B, #FFE7A3, #7EE2A8, #FFC24B); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: giftGrad 3.5s linear infinite; } .g-sub { margin-top: .35rem; max-width: 42rem; font-size: 1.02rem; color: rgba(255, 255, 255, .82); text-wrap: balance; } /* stage 1 — the gift box */ .g-intro { display: grid; justify-items: center; gap: .4rem; text-align: center; } .g-box { position: relative; width: 12rem; height: 12rem; margin: 2.4rem 0 1rem; padding: 0; border: 0; background: none; animation: gWiggle 2.6s ease-in-out infinite; } @keyframes gWiggle { 0%, 55%, 100% { transform: none; } 60% { transform: rotate(-7deg) scale(1.04); } 65% { transform: rotate(6deg) scale(1.07); } 70% { transform: rotate(-5deg) scale(1.04); } 75% { transform: rotate(3deg); } 80% { transform: none; } } .g-rays { position: absolute; inset: -55%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 226, 140, .3) 0 9deg, transparent 9deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: spin 18s linear infinite; } .g-glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 110, .8), rgba(255, 214, 110, 0) 66%); animation: gPulse 2.2s ease-in-out infinite; } @keyframes gPulse { 50% { transform: scale(1.18); opacity: .7; } } .g-coin { position: absolute; top: 30%; left: calc(30% + var(--i) * 20%); width: 2.2rem; height: 2.2rem; margin-left: -1.1rem; border-radius: 50%; display: grid; place-items: center; opacity: 0; background: radial-gradient(circle at 35% 30%, #FFF1B8, #FFC24B 60%, #E09B12); color: #7a4a00; font-weight: 800; font-size: 1.05rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); animation: gCoin 2.6s ease-out infinite calc(var(--i) * .85s); } @keyframes gCoin { 0% { transform: translateY(0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-7.5rem) scale(1) rotate(25deg); opacity: 0; } } .g-box-body { position: absolute; left: 14%; right: 14%; bottom: 4%; height: 50%; border-radius: 12px; background: linear-gradient(90deg, transparent 43%, #FFD45E 43% 57%, transparent 57%), linear-gradient(165deg, #FF7A45, #D9420F); box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .12), 0 22px 30px rgba(0, 0, 0, .35); } .g-box-lid { position: absolute; left: 8%; right: 8%; top: 32%; height: 16%; border-radius: 10px; transform-origin: 15% 100%; background: linear-gradient(90deg, transparent 43%, #FFD45E 43% 57%, transparent 57%), linear-gradient(165deg, #FF8A55, #E24E16); box-shadow: 0 8px 14px rgba(0, 0, 0, .25); } .g-box-lid::before, .g-box-lid::after { content: ''; position: absolute; bottom: 88%; width: 2.6rem; height: 2rem; border: .55rem solid #FFD45E; border-radius: 50%; } .g-box-lid::before { right: 50%; transform: rotate(-28deg); transform-origin: 100% 100%; } .g-box-lid::after { left: 50%; transform: rotate(28deg); transform-origin: 0 100%; } .g-burst { position: absolute; left: 50%; top: 42%; } .g-burst i { position: absolute; width: .75rem; height: .75rem; margin: -.375rem; border-radius: 50%; background: var(--k); opacity: 0; } .g-box.open { animation: gSquash .45s ease-in-out; } @keyframes gSquash { 0%, 100% { transform: none; } 30% { transform: scale(1.1, .9); } 65% { transform: scale(.95, 1.06); } } .g-box.open .g-box-lid { animation: gLidOff .9s cubic-bezier(.3, .7, .3, 1) .1s forwards; } @keyframes gLidOff { to { transform: translate(-40%, -330%) rotate(-50deg); opacity: 0; } } .g-box.open .g-burst i { animation: gBurst .9s ease-out .2s forwards; } @keyframes gBurst { 0% { transform: rotate(var(--a)) translateY(0) scale(1.2); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-11rem) scale(.2); opacity: 0; } } .g-box.open .g-glow { animation: gFlash .9s ease-out forwards; } @keyframes gFlash { to { transform: scale(3.2); opacity: 0; } } .g-box.open .g-coin { animation: none; } .g-tap { font-weight: 600; color: #FFE7A3; animation: gNudge 1.6s ease-in-out infinite; margin-bottom: 1rem; } @keyframes gNudge { 50% { transform: translateY(-5px); } } /* live countdown */ .g-cd { display: grid; justify-items: center; gap: .45rem; } .g-cd-l { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .78); } .g-cd-l::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: #FF6B5A; box-shadow: 0 0 0 4px rgba(255, 107, 90, .25); animation: blink 1.2s infinite; } .g-cd-row { display: flex; gap: .45rem; } .g-cd-u { min-width: 3.5rem; padding: .4rem .35rem .35rem; border-radius: 12px; text-align: center; overflow: hidden; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); } .g-cd-u b { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .g-cd-u b.tick { animation: gTick .45s var(--ease); } @keyframes gTick { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } } .g-cd-u small { font-size: .66rem; color: rgba(255, 255, 255, .7); } /* stage 2 — offers */ .g-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.3rem; } .g-top .g-cd { justify-items: end; } .g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; perspective: 1100px; } .g-offer { --rx: 0deg; --ry: 0deg; position: relative; display: block; padding: 2px; border: 0; border-radius: 22px; text-align: start; color: #fff; background: conic-gradient(from var(--ga), var(--c), rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, .06) 50%, var(--c) 72%, #fff 80%, var(--c) 88%); transform: rotateX(var(--rx)) rotateY(var(--ry)); box-shadow: 0 14px 30px rgba(0, 0, 0, .28); transition: transform .2s ease-out, translate .35s var(--ease), scale .35s var(--ease), opacity .35s, filter .35s, box-shadow .35s; animation: gFly .85s cubic-bezier(.2, 1.25, .4, 1) var(--d) backwards, gSpin 6s linear infinite; } @keyframes gSpin { to { --ga: 360deg; } } @keyframes gFly { from { transform: translate(var(--fx), var(--fy)) scale(.15) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } } .g-offer-in { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; height: 100%; padding: 1rem 1.1rem; border-radius: 20px; overflow: hidden; background: radial-gradient(130% 90% at 100% 0%, var(--c2), transparent 58%), linear-gradient(165deg, #0A5B5E, #053B3E); } .g-offer-in::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, .2), transparent 45%); } .g-offer-in::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent); transform: translateX(-160%) skewX(-20deg); animation: giftShine 5s ease-in-out var(--b) infinite; } .g-offer-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; } .g-ico { width: 3.3rem; height: 3.3rem; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--c2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); animation: gFloat 3.6s ease-in-out var(--b) infinite; } .g-ico svg { width: 2.1rem; height: 2.1rem; } @keyframes gFloat { 50% { transform: translateY(-4px) rotate(-5deg); } } .g-pct { display: flex; align-items: baseline; gap: .4rem; } [dir="rtl"] .g-pct small { order: -1; } .g-num { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--c); white-space: nowrap; } .g-num b { font-size: 3.1rem; font-weight: 700; color: #fff; text-shadow: 0 0 22px var(--c2); font-variant-numeric: tabular-nums; } .g-pct small, .g-ring small { font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: var(--c); } [dir="rtl"] .g-pct small, [dir="rtl"] .g-ring small { letter-spacing: 0; } .g-name { font-size: 1.12rem; font-weight: 700; } .g-desc { flex: 1; font-size: .84rem; line-height: 1.4; color: rgba(255, 255, 255, .75); } .g-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; padding: .45rem .95rem; border-radius: 999px; background: #fff; color: #053B3E; font-weight: 700; font-size: .85rem; transition: background .25s, gap .25s; } .g-go svg { width: 1rem; height: 1rem; } .g-offer:hover .g-go, .g-offer.spot .g-go { background: var(--c); gap: .7rem; } .g-offer:hover { translate: 0 -5px; box-shadow: 0 22px 40px rgba(0, 0, 0, .35), 0 0 30px var(--c2); } .g-offer.spot { translate: 0 -6px; scale: 1.035; box-shadow: 0 22px 44px rgba(0, 0, 0, .35), 0 0 0 3px var(--c), 0 0 46px var(--c2); } .g-grid.has-pick .g-offer:not(.picked) { opacity: .25; scale: .94; filter: saturate(.4) blur(1px); } .g-offer.picked { scale: 1.06; box-shadow: 0 0 0 4px #fff, 0 0 60px var(--c); } .g-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.3rem; } .g-surprise { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.2rem; padding: .3rem; padding-inline-end: 1.3rem; border: 0; border-radius: 999px; font-weight: 700; color: #4a2c00; background: linear-gradient(90deg, #FFC24B, #FFE08A, #FFC24B); background-size: 200% 100%; box-shadow: 0 10px 24px rgba(255, 194, 75, .3); animation: giftGrad 3s linear infinite; } .g-dice { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-orange); animation: giftWiggle 2.8s ease-in-out infinite; } .g-dice svg { width: 1.5rem; height: 1.5rem; } .g-surprise.rolling .g-dice { animation: spin .45s linear infinite; } .g-valid { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: rgba(255, 255, 255, .82); } .g-valid::before { content: '⏳'; } /* stage 3 — mobile number */ .g-back { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: 0 1rem; margin-bottom: 1rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; font-size: .9rem; } .g-back svg { width: 1.1rem; height: 1.1rem; } .g-form-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: center; } .g-chosen { padding: 2px; border-radius: 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 60px var(--c2); background: conic-gradient(from var(--ga), var(--c), rgba(255, 255, 255, .06) 25%, var(--c) 50%, #fff 60%, var(--c) 70%, rgba(255, 255, 255, .06) 85%, var(--c)); animation: gSpin 4s linear infinite, gIn .7s cubic-bezier(.2, 1.25, .4, 1) backwards; } @keyframes gIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } } .g-chosen-in { display: grid; justify-items: center; gap: .5rem; padding: 1.6rem 1.3rem 1.4rem; border-radius: 24px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, var(--c2), transparent 60%), linear-gradient(165deg, #0A5B5E, #053B3E); } .g-ring { position: relative; width: 10rem; height: 10rem; margin-bottom: .3rem; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .15rem; } .g-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px dashed var(--c); animation: spin 14s linear infinite; } .g-ring::after { content: ''; position: absolute; inset: .7rem; border-radius: 50%; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 40px var(--c2); } .g-ring > * { position: relative; z-index: 1; } .g-ring .g-ico { width: 2.6rem; height: 2.6rem; border-radius: 12px; } .g-ring .g-ico svg { width: 1.7rem; height: 1.7rem; } .g-ring .g-num b { animation: giftPop 2.4s ease-in-out infinite; display: inline-block; } .g-chosen .g-name { font-size: 1.3rem; } .g-chosen .g-desc { flex: none; } .g-chosen .g-valid { margin-top: .3rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .1); } .g-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; animation: gSlide .6s var(--ease) .15s backwards; } @keyframes gSlide { from { opacity: 0; transform: translateY(16px); } } .g-cta { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 4rem; padding: 0 2rem; border: 0; border-radius: 999px; font-weight: 700; font-size: 1.2rem; color: #3e2500; background: linear-gradient(90deg, #FFC24B, #FFE08A, #FFC24B); background-size: 200% 100%; box-shadow: 0 12px 30px rgba(255, 194, 75, .35); animation: giftGrad 3s linear infinite; transition: transform .2s var(--ease); } .g-cta:active { transform: scale(.97); } .g-cta svg { width: 1.45rem; height: 1.45rem; overflow: visible; } .g-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: giftShine 3.2s ease-in-out infinite; } .g-limited { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .7rem; border-radius: 999px; background: rgba(241, 94, 37, .22); border: 1px solid rgba(255, 138, 76, .55); color: #FFC09A; font-size: .78rem; font-weight: 700; line-height: 1.2; vertical-align: middle; white-space: nowrap; } .g-limited svg { width: .95rem; height: .95rem; flex: none; } .g-intro .g-limited { margin-bottom: .2rem; } .g-chosen .g-limited { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .35); color: #fff; } .g-soldout .g-empty { background: rgba(255, 194, 75, .14); animation: none; } .g-soldout .g-empty svg { width: 3.4rem; height: 3.4rem; stroke: #FFD27A; stroke-width: 1.6; } .g-info .g-info-ico { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(99, 195, 197, .18); color: #9FE3E4; } .g-info .g-info-ico svg { width: 1.6rem; height: 1.6rem; } .g-info .g-done-actions { justify-content: flex-start; } .g-terms { display: flex; align-items: flex-start; gap: .45rem; margin-top: .9rem; font-size: .8rem; line-height: 1.45; color: rgba(255, 255, 255, .8); } .g-terms svg { width: 1rem; height: 1rem; flex: none; margin-top: .12rem; } .g-terms b { color: #fff; font-weight: 600; } .g-form .g-terms { margin-top: .2rem; } /* stage 4 — registered */ .g-done { display: grid; justify-items: center; gap: .7rem; padding-top: .3rem; text-align: center; } .g-check { width: 6.2rem; height: 6.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(91, 224, 160, .14); animation: gRipple 1.5s ease-out .7s 2; } .g-check svg { width: 4.6rem; height: 4.6rem; fill: none; stroke: #5BE0A0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .g-check circle { stroke-dasharray: 150; stroke-dashoffset: 150; animation: gDraw .7s ease-out forwards; } .g-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: gDraw .45s ease-out .6s forwards; } @keyframes gDraw { to { stroke-dashoffset: 0; } } @keyframes gRipple { from { box-shadow: 0 0 0 0 rgba(91, 224, 160, .5); } to { box-shadow: 0 0 0 1.6rem rgba(91, 224, 160, 0); } } .g-done .g-sub { font-size: 1.1rem; } .g-note { font-size: .88rem; color: #FFE7A3; } .g-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .7rem; } .g-cta-sm { min-height: 3.3rem; padding: 0 2.4rem; font-size: 1.05rem; } .g-back:hover { background: rgba(255, 255, 255, .1); } .capture .g-check circle, .capture .g-check path { stroke-dashoffset: 0; } @media (max-width: 1280px) { .gift-btn { padding-inline-end: .3rem; } .gift-btn-label { display: none; } } @media (max-width: 1024px), (orientation: portrait) and (max-width: 1366px) { .gift-fab { bottom: auto; top: 7rem; inset-inline-end: 1.4rem; } } @media (max-width: 900px) { .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-form-wrap { grid-template-columns: minmax(0, 1fr); } .g-top .g-cd { justify-items: start; } } @media (max-width: 560px) { .demo-banner { gap: .6rem; padding-inline: .8rem; } .demo-banner .db-tag { padding: .5rem; } .demo-banner .db-tag-l { display: none; } .demo-banner .cap { font-size: .9rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .demo-banner .db-stop { padding: 0 1rem; min-height: 2.75rem; font-size: .9rem; } .land-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .land-field .btn { padding: 0 .9rem; } .adm-grid { grid-template-columns: 1fr; } .hist-btns { display: none; } .g-grid { grid-template-columns: 1fr; gap: .8rem; } .g-num b { font-size: 2.6rem; } .g-cd-u { min-width: 3rem; } .gift-fab { top: auto; bottom: 1rem; inset-inline-end: 1rem; padding: .35rem; gap: .35rem; } .gift-fab .gift-ico { width: 3rem; height: 3rem; } .gift-fab-txt, .gift-banner-logo { display: none; } .hero-foot { padding-inline-end: 7.5rem; } .g-ring { width: 8.5rem; height: 8.5rem; } } @media (max-width: 520px) { .start-choices { grid-template-columns: 1fr; gap: .6rem; } .sc-desc { display: none; } .sc-top { position: absolute; top: .9rem; inset-inline-end: 1rem; width: auto; margin: 0; } .start-card .sc-ico { display: none; } } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1180px) { .topbar { grid-template-columns: auto 1fr auto; gap: .8rem; padding: .6rem 1rem; } .brand .brand-title { display: none; } .score-pill small { display: none; } } @media (max-width: 1024px), (orientation: portrait) and (max-width: 1366px) { .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(16rem, 52%) 1fr; } .panel { border-inline-start: 0; border-top: 1px solid var(--line); border-radius: 26px 26px 0 0; margin-top: -1.2rem; position: relative; z-index: 3; box-shadow: 0 -10px 30px rgba(15, 42, 58, .08); } .hero-content { max-width: 90vw; top: auto; bottom: 4rem; transform: none; } .hero-shade, [dir="rtl"] .hero-shade { background: linear-gradient(0deg, rgba(247, 243, 236, .97) 0%, rgba(247, 243, 236, .9) 55%, rgba(247, 243, 236, 0) 80%); } .res-hero { grid-template-columns: 1fr; } .res-grid { grid-template-columns: 1fr 1fr; } .hud-time { inset-inline-end: 5rem; } .hud-tools { flex-direction: row; } .hud-tools .grp { flex-direction: row; } .hud-tools { bottom: auto; top: 5.2rem; inset-inline-end: 1rem; flex-direction: column; } .hud-tools .grp { flex-direction: column; } .hud-legend { top: auto; bottom: 5rem; } } @media (max-width: 700px) { /* top bar on two rows: logo and actions, then the step name and progress across the full width */ .topbar { grid-template-columns: auto 1fr; grid-template-areas: "brand actions" "progress progress"; row-gap: .5rem; padding: .55rem .9rem .6rem; } .topbar .brand { grid-area: brand; } .topbar .top-actions { grid-area: actions; justify-self: end; } .topbar .progress { grid-area: progress; width: 100%; gap: .4rem; } .progress-label { font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .progress-track { width: 100%; gap: .4rem; } .progress-track button { height: .5rem; } .ph-name { display: none; } .pl-phase { font-size: .7rem; padding: 0 .45rem; margin-inline-end: .35rem; } .hud-score .lbl { min-width: 0; } .tier-next, .tier-bar { display: none; } .tier-burst { padding: 1rem 1.3rem .9rem; width: max-content; max-width: calc(100% - 2rem); } .tier-burst .medal { width: 4rem; } .tier-burst b { font-size: 1.05rem; } .main.is-free .topbar .progress { display: none; } /* bottom bar: Back and Next share the width equally, the logo steps aside */ .bottombar { padding: .6rem .8rem; gap: .5rem; } .bottombar .mark { display: none; } .bottombar #backBtn, .bottombar .btn-next { flex: 1 1 0; min-width: 0; padding: 0 .8rem; } .bottombar .mid { flex: none; } .bottombar .mid .btn-label { display: none; } .opt-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-facts { display: none; } .start-card { min-height: 0; padding: .9rem 1rem; } .sc-title { font-size: 1.1rem; } .sc-desc { font-size: .8rem; } .res-grid { grid-template-columns: 1fr; } .story-card { grid-template-columns: 1fr; } .top-actions .score-pill { display: none; } .exp-row { grid-template-columns: 5.6rem 1fr 4rem; } } /* Very large displays: bigger touch targets & type */ @media (min-width: 2200px) { :root { --touch: 3.6rem; --panel-w: clamp(30rem, 30vw, 40rem); } } /* ===================================================================== MOTION PREFERENCES & CAPTURE MODE ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .reduced *, .reduced *::before, .reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .capture *, .capture *::before, .capture *::after { animation: none !important; transition: none !important; } .capture .toasts { display: none; } /* clean capture mode (?clean=1): stage only, no HUD — used for presentation images */ .clean .hud, .clean .toasts { display: none !important; } /* ===================================================================== DESIGN TRACKS · CLIENT BRIEF · APPROVAL · REGULATIONS · ASSISTANT ===================================================================== */ /* ---------- track switch (start screen, free exploration) ---------- */ .hero-start-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .45rem; } .hero-start-head .hero-start-label { flex: 1; margin: 0; } .track-switch { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(15, 42, 58, .08); flex: none; } .track-switch button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; } .track-switch button svg { width: 1.05rem; height: 1.05rem; } .track-switch button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); } .track-switch button:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 1px; } .track-note { font-size: .82rem; color: var(--muted); margin: 0 0 .8rem; min-height: 1.2em; } .track-switch.in-panel { display: flex; } .track-switch.in-panel button { flex: 1; justify-content: center; } /* free exploration: headings between the client requirements and the sustainability groups */ .acc-sep { display: flex; align-items: center; gap: .5rem; margin: 1.1rem 0 .55rem; font-size: .8rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; } [dir="rtl"] .acc-sep { letter-spacing: 0; font-size: .88rem; } .acc-sep:first-child { margin-top: 0; } .acc-sep svg { width: 1.1rem; height: 1.1rem; } .acc-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-2); } .acc-sep + .acc { margin-top: 0; } .free-approve { width: 100%; margin-top: .4rem; } /* ---------- regulations strip under a step's lead ---------- */ .reg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; } .reg-strip-l { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--muted); margin-inline-end: .2rem; } .reg-strip-l svg { width: 1rem; height: 1rem; } .reg-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.1rem; padding: 0 .7rem; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .2s, border-color .2s; } .reg-chip svg { width: .95rem; height: .95rem; color: var(--brand); } .reg-chip:hover { background: var(--soft); } .reg-chip.pend { border-style: dashed; color: var(--muted); } .reg-chip.pend svg { color: var(--muted); } .reg-chip.ok { border-color: rgba(46, 158, 107, .45); background: var(--leaf-soft); color: #1f6b49; } .reg-chip.ok svg { color: var(--leaf); } .reg-chip.bad { border-color: rgba(228, 87, 46, .55); background: var(--tint-red); color: #b33a16; animation: pop .35s var(--ease); } .reg-chip.bad svg { color: var(--hot); } .reg-all { border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; padding: .3rem; } /* ---------- brief fields ---------- */ .bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .8rem; } .bf { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .bf.wide { grid-column: 1 / -1; } .bf-l { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--ink-2); } .bf-l .req { font-style: normal; color: var(--hot); } .bf-add { font-style: normal; font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: rgba(99, 195, 197, .2); color: var(--brand); } .bf input, .bf textarea { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .95rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .bf textarea { min-height: 5.2rem; resize: vertical; line-height: 1.7; } .bf input:focus-visible, .bf textarea:focus-visible { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(99, 195, 197, .25); } .bf.need input, .bf.need textarea { border-color: rgba(242, 165, 65, .7); background: var(--tint-amber-2); } /* a field and its unit as one joined control: the unit is its own segment, so it never covers the value */ .bf-in { display: flex; align-items: stretch; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .bf-in:focus-within { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(99, 195, 197, .25); } .bf .bf-in input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .bf .bf-in input:focus-visible { box-shadow: none; } .bf-in i { display: flex; align-items: center; flex: none; padding: 0 .85rem; border-inline-start: 1.5px solid var(--line); background: var(--soft); font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; } .bf.need .bf-in { border-color: rgba(242, 165, 65, .7); background: var(--tint-amber-2); } .bf.need .bf-in input { background: transparent; } .bf.need .bf-in i { background: var(--tint-amber); border-color: rgba(242, 165, 65, .35); } /* numbers, phone, email, dates and the PIN keep their own left-to-right order but line up with the Arabic labels */ [dir="rtl"] .bf input[dir="ltr"] { text-align: right; } [dir="rtl"] .bf input[dir="ltr"]::placeholder { text-align: right; } /* no spin arrows on the brief's number fields: they crowd small screens and are easy to nudge by mistake */ .bf input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .bf input[type="number"]::-webkit-inner-spin-button, .bf input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .bf-opts { display: flex; flex-wrap: wrap; gap: .4rem; } .bf-opt { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: 0 .9rem; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .88rem; color: var(--ink-2); cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .bf-opt:hover { background: var(--soft); } .bf-opt[aria-pressed="true"] { background: var(--sel-teal-2); border-color: var(--brand-teal); color: var(--brand); font-weight: 600; } .bf-opt .bx { width: 1.15rem; height: 1.15rem; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; background: var(--surface); flex: none; } .bf-opt .bx svg { width: .85rem; height: .85rem; opacity: 0; color: #fff; } .bf-opt[aria-pressed="true"] .bx { background: var(--brand-deep); border-color: var(--brand); } .bf-opt[aria-pressed="true"] .bx svg { opacity: 1; } .bf-opt:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 1px; } .bf-linked { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .65rem .85rem; border-radius: 12px; background: var(--leaf-soft); color: #1f6b49; } .bf-linked svg { width: 1.1rem; height: 1.1rem; } .bf-linked small { margin-inline-start: auto; font-size: .74rem; opacity: .8; } /* drop-downs, "Other" boxes and picture cards in the client brief */ .bf-sel select { flex: 1; min-width: 0; min-height: 2.9rem; padding: .55rem .8rem; border: 0; background: transparent; font: inherit; font-size: .95rem; color: var(--ink); cursor: pointer; } .bf-sel select:focus-visible { outline: none; } .bf-other { margin-top: .1rem; border-style: dashed; border-color: var(--brand-teal); background: var(--sel-teal); } .bf-opt.is-other { border-style: dashed; } .bf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .5rem; } .bf-card { display: grid; justify-items: center; gap: .35rem; padding: .6rem .4rem .55rem; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.3; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; } .bf-card:hover { border-color: var(--brand-teal); background: var(--sel-teal); } .bf-card:active { transform: scale(.97); } .bf-card[aria-pressed="true"] { border-color: var(--brand); background: var(--sel-teal-2); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); } .bf-card:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 1px; } .bf-card-o { height: 3.6rem; display: grid; place-items: center; color: var(--muted); } .bf-card-o svg { width: 1.6rem; height: 1.6rem; } .stair-pic { width: 3.6rem; height: 3.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--brand); } .stair-pic rect, .stair-pic circle { fill: rgba(99, 195, 197, .14); } .stair-pic .ar { stroke: var(--brand-orange); stroke-width: 2; } /* the inspiration images (the client's image basket) */ .mood-drop { display: grid; justify-items: center; gap: .3rem; padding: 1.2rem 1rem; border-radius: var(--radius-sm); border: 2px dashed var(--brand-teal); background: var(--sel-teal); text-align: center; color: var(--brand); cursor: pointer; transition: background .2s, border-color .2s; } .mood-drop:hover, .mood-drop.over { background: var(--sel-teal-2); border-color: var(--brand); } .mood-drop svg { width: 1.8rem; height: 1.8rem; } .mood-drop b { font-size: .95rem; } .mood-drop small { color: var(--muted); font-size: .78rem; } .mood-filters .chip small { opacity: .7; font-weight: 600; } .mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; } .mood-card { margin: 0; display: grid; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); } .mood-img { display: block; padding: 0; border: 0; background: var(--soft); cursor: zoom-in; } .mood-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .mood-card figcaption { position: relative; display: grid; gap: .35rem; padding: .5rem; } .mood-card .bf-in { border-radius: 10px; } .mood-card select { min-height: 2.3rem; padding: .3rem .55rem; border: 0; background: transparent; font: inherit; font-size: .82rem; color: var(--ink); width: 100%; } .mood-card textarea { width: 100%; min-height: 3.4rem; padding: .4rem .55rem; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .82rem; line-height: 1.6; color: var(--ink); resize: vertical; } .mood-card textarea:focus-visible { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(99, 195, 197, .25); } .mood-del { position: absolute; top: -2.6rem; inset-inline-end: .45rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #b33a16; cursor: pointer; box-shadow: var(--shadow-sm); } .mood-del svg { width: 1rem; height: 1rem; } .mood-strip { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .9rem .8rem; } .mood-strip img { width: 3.6rem; height: 2.7rem; object-fit: cover; border-radius: 6px; } .mood-big img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: var(--soft); } .mood-big p { margin: .5rem 0 0; } .bf-privacy { display: flex; align-items: center; gap: .4rem; } .bf-privacy svg { width: 1rem; height: 1rem; flex: none; } /* a row showing an item held by another step */ .link-row { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem .9rem; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--soft); text-align: start; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; } .link-row:hover { border-color: var(--brand-teal); background: var(--surface); } .link-row .ico { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(99, 195, 197, .2); color: var(--brand); flex: none; } .link-row .ico svg { width: 1.15rem; height: 1.15rem; } .lr-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .lr-t small { font-size: .74rem; color: var(--muted); } .lr-t b { font-size: .95rem; color: var(--ink); } .lr-go { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--brand); flex: none; } .lr-go svg { width: 1rem; height: 1rem; } /* ---------- review & approval ---------- */ .ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .ap-stat { display: grid; justify-items: start; gap: .15rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: var(--soft); border: 1px solid var(--line); } .ap-stat .ico { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--brand); } .ap-stat .ico svg { width: 1.05rem; height: 1.05rem; } .ap-stat b { font-size: 1.25rem; } .ap-stat small { font-size: .74rem; color: var(--muted); line-height: 1.35; } .ap-stat.ok { background: var(--leaf-soft); border-color: rgba(46, 158, 107, .25); } .ap-stat.bad { background: var(--tint-red); border-color: rgba(228, 87, 46, .3); } .ap-miss { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; } .ap-miss .why-link { padding: .35rem .75rem; font-size: .82rem; } .rv-list { display: grid; gap: .55rem; } .rv { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .rv summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; } .rv summary::-webkit-details-marker { display: none; } .rv summary .ico { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: rgba(99, 195, 197, .18); color: var(--brand); flex: none; } .rv summary .ico svg { width: 1rem; height: 1rem; } .rv summary b { font-size: .95rem; } .rv summary small { margin-inline-start: auto; font-size: .76rem; color: var(--muted); } .rv-edit { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--brand); cursor: pointer; flex: none; } .rv-edit svg { width: 1rem; height: 1rem; } .rv-rows { padding: 0 .9rem .7rem; } .rv-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid #EDF1F2; font-size: .86rem; line-height: 1.6; } .rv-rows span { color: var(--muted); flex: none; max-width: 45%; } .rv-rows b { text-align: end; font-weight: 600; overflow-wrap: anywhere; } .rv-rows b.empty { color: #9AA9AE; font-weight: 400; } .ap-ack { display: grid; gap: .55rem; padding: 1rem; border-radius: var(--radius); border: 2px solid var(--line); background: linear-gradient(180deg, #fff, var(--soft)); } .ack-row { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: .9rem; line-height: 1.7; text-align: start; color: var(--ink-2); cursor: pointer; } .ack-row .bx { width: 1.4rem; height: 1.4rem; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; margin-top: .15rem; background: var(--surface); } .ack-row .bx svg { width: 1rem; height: 1rem; color: #fff; opacity: 0; } .ack-row[aria-pressed="true"] { border-color: var(--leaf); background: var(--sel-leaf); } .ack-row[aria-pressed="true"] .bx { background: var(--leaf); border-color: var(--leaf); } .ack-row[aria-pressed="true"] .bx svg { opacity: 1; } .ap-go { width: 100%; margin-top: .3rem; } .ap-go:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; } .ap-done { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--leaf-soft); border: 1px solid rgba(46, 158, 107, .3); animation: pop .4s var(--ease); } .ap-check { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; flex: none; } .ap-check svg { width: 1.6rem; height: 1.6rem; } .ap-done b { display: block; font-size: 1.1rem; color: #1f6b49; } .ap-done small { color: #2f6e52; font-size: .84rem; } .ap-actions { display: flex; flex-wrap: wrap; gap: .5rem; } /* ---------- the regulations screen ---------- */ .modal-card.regs-card { width: min(64rem, 100%); } .modal-card.regs-card h3 { display: flex; align-items: center; gap: .6rem; } .modal-card.regs-card h3 svg { width: 1.6rem; height: 1.6rem; color: var(--brand); } .modal-card.regs-card .note a { color: var(--brand); font-weight: 600; } .rg-zones .seg { grid-auto-columns: auto; justify-content: start; overflow-x: auto; } .rg-zones .seg button { padding: 0 1rem; white-space: nowrap; } .rg-mine { font-style: normal; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: var(--brand-orange); color: #fff; margin-inline-start: .25rem; } .rg-cat h4 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--brand); margin: .4rem 0 .5rem; } .rg-cat h4::after { content: ''; flex: 1; height: 1px; background: var(--line); } .rg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding: .75rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: box-shadow .4s, border-color .4s; } .rg-row + .rg-row { margin-top: .45rem; } .rg-row.flash { border-color: var(--brand-teal); box-shadow: 0 0 0 4px rgba(99, 195, 197, .25); } .rg-txt b { font-size: .95rem; color: var(--ink); } .rg-txt p { margin: .15rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.6; } .rg-val { font-weight: 700; color: var(--brand); text-align: end; max-width: 18rem; font-size: .95rem; } .rg-val.pend { font-weight: 600; font-size: .78rem; color: #9AA9AE; padding: .25rem .6rem; border-radius: 999px; border: 1px dashed var(--line-2); } .rg-st { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .3rem; justify-self: start; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; } .rg-st svg { width: .9rem; height: .9rem; } .rg-st.ok { background: var(--leaf-soft); color: #1f6b49; } .rg-st.bad { background: var(--tint-red); color: #b33a16; } /* editor */ .rg-src { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .rg-src legend { grid-column: 1 / -1; } .rg-f { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--muted); min-width: 0; } .rg-f.wide { grid-column: 1 / -1; } .rg-f input, .rg-f textarea, .rg-f select, .rg-zone-row input { width: 100%; min-height: 2.6rem; padding: .45rem .7rem; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .92rem; color: var(--ink); } .rg-f textarea { min-height: 4rem; resize: vertical; line-height: 1.6; } .rg-f input:focus-visible, .rg-f textarea:focus-visible, .rg-f select:focus-visible, .rg-zone-row input:focus-visible { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(99, 195, 197, .25); } .rg-f input.err, .rg-zone-row input.err { border-color: var(--hot); background: var(--tint-red-2); } .rg-zone-list { display: grid; gap: .4rem; } .rg-zone-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr) 2.6rem; gap: .4rem; align-items: center; } .rg-zone-row input[readonly] { background: var(--soft); color: var(--muted); } .rg-zone-row .icon-btn { width: 2.6rem; height: 2.6rem; } .rg-ed { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .rg-ed + .rg-ed { margin-top: .4rem; } .rg-ed summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; cursor: pointer; } .rg-ed summary::-webkit-details-marker { display: none; } .rg-ed summary b { font-size: .92rem; } .rg-ed summary small { margin-inline-start: auto; font-size: .74rem; color: var(--muted); } .rg-ed[open] summary { border-bottom: 1px solid var(--line); } .rg-ed-body { display: grid; gap: .7rem; padding: .8rem; } .rg-ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .rg-vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; padding: .7rem; border-radius: 10px; background: var(--soft); } .rg-del { justify-self: start; color: #b33a16; } /* ---------- the design assistant ---------- */ .assist { position: absolute; z-index: 6; inset-inline-start: 1rem; bottom: 5.6rem; width: min(22rem, calc(100% - 2rem)); max-height: calc(100% - 6.6rem); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .4rem; pointer-events: auto; } /* the bubble scrolls inside the stage, so the header and its fold button always stay in view */ .assist > .as-bubble { min-height: 0; max-height: none; overscroll-behavior: contain; } .assist > .as-head, .assist > .as-bubble { animation: asIn .42s var(--ease) backwards; transform-origin: bottom left; } [dir="rtl"] .assist > .as-head, [dir="rtl"] .assist > .as-bubble { transform-origin: bottom right; } .assist > .as-bubble { animation-delay: .05s; } .assist.closing > .as-head, .assist.closing > .as-bubble { animation: asOut .23s var(--ease) forwards; } @keyframes asOut { to { opacity: 0; transform: translateY(16px) scale(.9); } } /* folded: one button that brings the assistant back */ .assist.min { width: auto; justify-items: start; } .as-fab { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .3rem 1rem .3rem .3rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(15, 42, 58, .18); font: inherit; font-size: .88rem; font-weight: 600; color: var(--brand); cursor: pointer; animation: asFab .4s var(--ease) backwards; transition: transform .2s var(--ease), box-shadow .2s; } [dir="rtl"] .as-fab { padding: .3rem .3rem .3rem 1rem; } .as-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 42, 58, .24); } .as-fab:active { transform: scale(.96); } .as-fab:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; } .as-fab .as-av { position: relative; } .as-fab .as-av::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--brand-teal); opacity: 0; animation: asRing 1.6s ease-out .5s 2; } @keyframes asFab { from { opacity: 0; transform: translateY(10px) scale(.7); } to { opacity: 1; transform: none; } } @keyframes asRing { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } } @media (prefers-reduced-motion: reduce) { .assist > *, .as-fab, .as-fab .as-av::after { animation: none !important; } } html.reduced .assist > *, html.reduced .as-fab, html.reduced .as-fab .as-av::after { animation: none !important; } .assist[hidden] { display: none; } @keyframes asIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .as-head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-2); } .as-head b { padding: .2rem .6rem; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .as-av { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand-teal), var(--brand)); color: #fff; box-shadow: 0 6px 16px rgba(28, 90, 122, .3); flex: none; } .as-av svg { width: 1.25rem; height: 1.25rem; } .as-x { margin-inline-start: auto; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: var(--glass); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; } .as-x svg { width: 1rem; height: 1rem; } .as-bubble { position: relative; padding: .9rem 1rem; border-radius: 18px; border-start-start-radius: 6px; background: rgba(255, 255, 255, .97); box-shadow: 0 14px 34px rgba(15, 42, 58, .18); border: 1px solid var(--line); font-size: .9rem; line-height: 1.7; color: var(--ink-2); max-height: 36vh; overflow-y: auto; } .assist.warn .as-bubble { border-color: rgba(228, 87, 46, .45); box-shadow: 0 14px 34px rgba(228, 87, 46, .2); } .assist.good .as-bubble { border-color: rgba(46, 158, 107, .4); } .as-title { display: block; font-size: .98rem; color: var(--ink); margin-bottom: .25rem; } .as-text p { margin: 0 0 .4rem; } .as-text p:last-child { margin-bottom: 0; } .as-val b { color: var(--brand); } .as-ok, .as-bad { display: flex; align-items: center; gap: .35rem; font-weight: 600; } .as-ok { color: #1f6b49; } .as-bad { color: #b33a16; } .as-ok svg, .as-bad svg { width: 1.05rem; height: 1.05rem; flex: none; } .as-rules { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .as-rules .why-link { padding: .3rem .7rem; font-size: .8rem; background: rgba(28, 90, 122, .08); color: var(--brand); } .as-rules .why-link.on { background: var(--brand-deep); color: #fff; } .as-rules .why-link.on svg { color: #fff; } .as-sib-l { margin: .6rem 0 0 !important; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--muted); } .as-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } .as-dots { display: inline-flex; gap: .3rem; padding: .2rem 0; } .as-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-teal); animation: asDot 1s infinite ease-in-out; } .as-dots i:nth-child(2) { animation-delay: .15s; } .as-dots i:nth-child(3) { animation-delay: .3s; } @keyframes asDot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } /* reading time left before an unrequested message folds itself; held while the visitor is inside it */ .as-timer { position: absolute; inset-inline: 1rem; bottom: .35rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-teal), var(--brand)); opacity: .55; transform-origin: left; animation: asTimer var(--as-t, 9s) linear forwards; pointer-events: none; } [dir="rtl"] .as-timer { transform-origin: right; background: linear-gradient(270deg, var(--brand-teal), var(--brand)); } .assist.warn .as-timer { background: var(--hot); } .assist.hold .as-timer { animation-play-state: paused; opacity: .25; } @keyframes asTimer { to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .as-timer { display: none; } } html.reduced .as-timer { display: none; } /* ---------- printed report ---------- */ #printReport { display: none; } @media print { @page { size: A4; margin: 14mm; } body { background: #fff !important; } body > *:not(#printReport) { display: none !important; } #printReport { display: block !important; font-family: var(--font); color: #19383e; font-size: 10.5pt; line-height: 1.6; } .pr-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 3px solid #1C5A7A; margin-bottom: .8rem; } .pr-head b { font-size: 9pt; letter-spacing: .06em; color: #278b91; } .pr-head h1 { font-size: 17pt; margin: .2rem 0; color: #183f46; } .pr-head p { margin: 0; color: #71858a; } .pr-meta { display: grid; gap: .2rem; text-align: end; font-size: 9pt; color: #587076; align-content: start; } .pr-ok { color: #257650; font-weight: 700; } .pr-draft { color: #a43d32; font-weight: 700; } .pr-villa { text-align: center; margin: .3rem 0 .6rem; } .pr-villa svg { width: 70%; height: auto; } #printReport section { break-inside: avoid; margin-bottom: .7rem; } #printReport .pr-pic { display: inline-block; vertical-align: middle; margin-inline-end: .4rem; } #printReport .pr-pic svg { width: 1.4cm; height: 1.4cm; fill: none; stroke: #1C5A7A; stroke-width: 1.6; } #printReport .pr-pic .ar { stroke: #F15E25; } #printReport .pr-mood { break-inside: auto; } .pr-mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35cm; } .pr-mood-grid figure { margin: 0; break-inside: avoid; border: 1px solid #dfe8ea; border-radius: 6px; overflow: hidden; } .pr-mood-grid img { display: block; width: 100%; height: 4.2cm; object-fit: cover; } .pr-mood-grid figcaption { display: grid; gap: .1cm; padding: .15cm .2cm; font-size: 8.5pt; } .pr-mood-grid figcaption span { color: #3d5a60; } #printReport h2 { font-size: 12pt; color: #278b91; margin: 0 0 .3rem; padding-bottom: .2rem; border-bottom: 1px solid #dfe8ea; } #printReport table { width: 100%; border-collapse: collapse; } #printReport th, #printReport td { padding: .25rem .4rem; border-bottom: 1px solid #edf1f2; vertical-align: top; text-align: start; } #printReport th { width: 38%; font-weight: 400; color: #71858a; } #printReport td { font-weight: 600; } .pr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.4rem; } .pr-sign span { display: block; font-size: 9pt; color: #587076; margin-bottom: 2.2rem; } .pr-sign i { display: block; border-bottom: 1px solid #19383e; } #printReport footer { margin-top: 1rem; font-size: 8pt; color: #8a9a9e; text-align: center; } } /* ---------- small screens ---------- */ @media (max-width: 700px) { .hero-start-head { flex-wrap: wrap; } .hero-start-head .hero-start-label::after { display: none; } .track-switch:not(.in-panel) { width: 100%; } .track-switch:not(.in-panel) button { flex: 1; justify-content: center; } .bf-grid { grid-template-columns: 1fr; } .ap-stats { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; } .ap-stat { padding: .6rem; } .rg-src, .rg-ed-grid { grid-template-columns: 1fr; } .rg-zone-row { grid-template-columns: 4.5rem minmax(0, 1fr) 2.6rem; } .rg-zone-row input:nth-child(3) { display: none; } .rg-row { grid-template-columns: 1fr; } .rg-val { text-align: start; } .assist { bottom: 4.6rem; } .as-bubble { max-height: 30vh; font-size: .84rem; padding: .75rem .85rem; } .as-av { width: 2rem; height: 2rem; } .as-fab-t { display: none; } .as-fab, [dir="rtl"] .as-fab { padding: .25rem; } } .note > svg { width: 1.05em; height: 1.05em; vertical-align: -.18em; display: inline-block; } /* shorter landscape screens: tighten the intro so the start choices and links fit above the sources line */ @media (max-height: 940px) and (min-width: 701px) { .hero h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); } .hero .tagline { margin-top: .6rem; } .hero .intro { margin-top: .6rem; } .hero-start { margin-top: 1.1rem; } .track-note { margin-bottom: .55rem; } .start-card { padding: .85rem 1rem .8rem; } .hero-modes { margin-top: .6rem; } } /* ===================================================================== VILLA SKETCH — blocks on the plot plan ===================================================================== */ .sk-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; } .sk-tp { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .55rem .4rem .5rem; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; } .sk-tp:hover { border-color: var(--brand-teal); background: var(--sel-teal); } .sk-tp:active { transform: scale(.97); } .sk-tp svg { width: 100%; height: 2.6rem; } .sk-tp svg rect, .sk-tp svg polygon { stroke: #fff; stroke-width: .5; } .sk-tp .sk-tp-ico { height: 2.6rem; display: grid; place-items: center; color: var(--brand); } .sk-tp .sk-tp-ico svg { width: 1.7rem; height: 1.7rem; } .sk-tp.want { border-color: var(--brand-orange); background: var(--tint-orange); } .sk-tp em { position: absolute; top: -.55rem; inset-inline-start: .4rem; font-style: normal; font-size: .64rem; padding: .05rem .45rem; border-radius: 999px; background: var(--brand-orange); color: #fff; } .sk-wrap { position: relative; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--sketch-bg); overflow: hidden; } .sk-plan { display: block; width: 100%; height: auto; max-height: 58vh; touch-action: none; user-select: none; -webkit-user-select: none; } .sk-g { stroke: rgba(15, 42, 58, .06); stroke-width: .05; } .sk-g.b { stroke: rgba(15, 42, 58, .14); stroke-width: .08; } .sk-plot { fill: rgba(232, 214, 178, .55); stroke: #b98d57; stroke-width: .18; } .sk-build { fill: none; stroke: var(--leaf); stroke-width: .12; stroke-dasharray: .5 .35; } .sk-front { fill: var(--muted); font-weight: 600; text-anchor: middle; } .sk-ghost { fill: rgba(28, 90, 122, .06); stroke: var(--brand); stroke-width: .12; stroke-dasharray: .45 .3; } .ls-house { fill: rgba(90, 100, 110, .45); stroke: #5a646e; stroke-width: .14; } .ls-p { cursor: grab; } .ls-p.on rect, .ls-p.on circle:nth-child(2) { stroke: var(--accent, #f26b21); stroke-width: .3; } .ls-fruit { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .35rem 0 .7rem; } .ls-sps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; margin: .35rem 0 .7rem; } .ls-sp { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: start; padding: .5rem .65rem; border-radius: 12px; border: 1px solid var(--line, #d8d2c4); background: var(--card, #fff); cursor: pointer; font: inherit; color: inherit; } .ls-sp b { font-size: .9rem; } .ls-sp small { font-size: .74rem; color: var(--muted, #6b7378); line-height: 1.35; } .ls-sp em { font-style: normal; font-size: .7rem; color: #a35a12; background: rgba(242, 160, 60, .14); border-radius: 6px; padding: .05rem .35rem; } .ls-sp[aria-pressed="true"] { border-color: var(--accent, #f26b21); box-shadow: 0 0 0 2px rgba(242, 107, 33, .25); } .ls-cols { display: flex; flex-wrap: wrap; gap: .45rem; margin: .35rem 0 .6rem; } .ls-col { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px var(--line, #d8d2c4); cursor: pointer; padding: 0; } .ls-col.usual { background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), var(--c); } .ls-col[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent, #f26b21); } .ls-types { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; } .ls-types .sk-pf svg { width: 28px; height: 28px; } .sk-draw { fill: rgba(62, 154, 166, .22); stroke: #3E9AA6; stroke-width: .14; stroke-dasharray: .5 .3; pointer-events: none; } .sk-draw.bad { fill: rgba(200, 60, 50, .14); stroke: #c83c32; } .sk-draw-t { fill: var(--ink, #1f2a30); font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; } .sk-b { cursor: grab; } .sk-b rect, .sk-b polygon { stroke: #fff; stroke-width: .16; transition: fill .2s; } .sk-b.L0 rect, .sk-b.L0 polygon, .sk-tp svg .L0, .sk-pf svg .L0 { fill: #3E9AA6; } .sk-b.L1 rect, .sk-b.L1 polygon, .sk-tp svg .L1 { fill: #1C5A7A; } .sk-b.L2 rect, .sk-b.L2 polygon, .sk-tp svg .L2 { fill: #F15E25; } .sk-tp svg .L1, .sk-tp svg .L2 { opacity: .85; } .sk-b.weak rect, .sk-b.weak polygon { stroke: var(--hot); stroke-width: .3; stroke-dasharray: .5 .3; } .sk-under { fill: rgba(28, 90, 122, .08); stroke: rgba(28, 90, 122, .22); stroke-width: .1; } .sk-under.near { fill: rgba(62, 154, 166, .2); stroke: rgba(28, 90, 122, .45); stroke-dasharray: .4 .25; } .sk-over { fill: none; stroke: rgba(241, 94, 37, .7); stroke-width: .12; stroke-dasharray: .3 .3; pointer-events: none; } /* floor tabs above the plan */ .sk-lvs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; } .sk-lv { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .45rem; align-items: center; padding: .5rem .7rem; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; text-align: start; cursor: pointer; transition: border-color .2s, background .2s; } .sk-lv i { grid-row: 1 / span 2; width: .8rem; height: .8rem; border-radius: 4px; background: #3E9AA6; } .sk-lv.L1 i { background: #1C5A7A; } .sk-lv.L2 i { background: #F15E25; } .sk-lv b { font-size: .84rem; color: var(--ink); } .sk-lv small { font-size: .72rem; color: var(--muted); } .sk-lv[aria-selected="true"] { border-color: var(--brand); background: var(--soft-blue); box-shadow: inset 0 -3px 0 var(--brand); } .sk-sel-info { margin: 0; font-size: .82rem; font-weight: 600; color: var(--brand-orange); } .sk-b.on rect, .sk-b.on polygon { stroke: var(--brand-orange); stroke-width: .3; } .sk-b text { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; } .sk-b .sk-d { font-weight: 500; opacity: .9; } .sk-h { cursor: pointer; } .sk-h circle { fill: #fff; stroke: var(--brand-orange); stroke-width: .22; } .sk-h circle.hit { fill: transparent; stroke: none; } .sk-h[data-side^="x"] { cursor: ew-resize; } .sk-h[data-side^="y"] { cursor: ns-resize; } #skPlan:active .sk-b.on { cursor: grabbing; } .sk-n circle { fill: rgba(255, 255, 255, .85); stroke: var(--line-2); stroke-width: .08; } .sk-n path { stroke: var(--brand-orange); stroke-width: .28; stroke-linecap: round; } .sk-n text { fill: var(--brand-orange); font-weight: 700; text-anchor: middle; dominant-baseline: middle; } .sk-empty { position: absolute; inset-inline: 1rem; bottom: .8rem; margin: 0; padding: .55rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .92); font-size: .82rem; color: var(--ink-2); box-shadow: var(--shadow-sm); } .sk-bar { display: flex; flex-wrap: wrap; gap: .4rem; } .sk-bar .sk-del { color: #b33a16; } .sk-sel { padding: .7rem .8rem; border-radius: var(--radius-sm); border: 2px solid rgba(241, 94, 37, .35); background: var(--tint-orange); display: grid; gap: .55rem; } .sk-sel .section-label { margin: 0; } .sk-c { cursor: nwse-resize; } .sk-c[data-side="x0y0"], .sk-c[data-side="x1y1"] { cursor: nesw-resize; } .sk-c rect { fill: var(--brand-orange); stroke: #fff; stroke-width: .16; } .sk-guide { stroke: var(--brand-orange); stroke-width: .07; stroke-dasharray: .35 .25; pointer-events: none; } .sk-dim { pointer-events: none; } .sk-dim path { stroke: var(--brand); stroke-width: .07; fill: none; } .sk-dim text { fill: var(--brand); font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: .25; } .sk-dim.bad path { stroke: var(--hot); } .sk-dim.bad text { fill: var(--hot); } .sk-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem; } .sk-f { display: grid; gap: .2rem; font-size: .74rem; font-weight: 600; color: var(--muted); } .sk-in { min-width: 0; display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); padding-inline-end: .55rem; transition: border-color .2s; } .sk-in:focus-within { border-color: var(--brand); } .sk-in input { flex: 1; width: 100%; min-width: 0; border: 0; background: none; font: inherit; font-size: .92rem; font-weight: 700; color: var(--ink); padding: .4rem .55rem; outline: none; } .sk-in i { font-style: normal; color: var(--muted); } .sk-als { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; } .sk-al { display: grid; justify-items: center; gap: .15rem; padding: .35rem .15rem; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .66rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .2s, background .2s; } .sk-al:hover { border-color: var(--brand-orange); background: var(--tint-orange); } .sk-al svg { width: 1.35rem; height: 1.35rem; } .sk-al svg .o { fill: none; stroke: var(--line-2); stroke-width: 1.4; stroke-dasharray: 2 1.5; } .sk-al svg .b { fill: var(--brand-orange); opacity: .85; } .sk-al svg path { stroke: var(--brand); stroke-width: 1.6; } .sk-keys { font-size: .74rem; } .sk-frame { fill: none; stroke: var(--brand-orange); stroke-width: .07; stroke-dasharray: .3 .25; pointer-events: none; } .sk-rotl { stroke: var(--brand-orange); stroke-width: .08; pointer-events: none; } .sk-rot { cursor: grab; } .sk-rot circle:not(.hit) { fill: var(--brand-orange); stroke: #fff; stroke-width: .18; } .sk-rot path { fill: none; stroke: #fff; stroke-width: .16; stroke-linecap: round; pointer-events: none; } .sk-angle { fill: var(--brand-orange); font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: .3; pointer-events: none; } .sk-profs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; } .sk-pf { display: grid; justify-items: center; gap: .15rem; padding: .35rem .1rem; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: .62rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .2s, background .2s; } .sk-pf:hover { border-color: var(--brand-teal); } .sk-pf[aria-pressed="true"] { border-color: var(--brand-orange); background: var(--tint-orange); color: var(--ink); } .sk-pf svg { width: 100%; height: 1.5rem; } .sk-pf svg polygon, .sk-pf svg rect, .sk-pf svg path { stroke: none; } .sk-pf svg path.L0, .sk-b.L0 path { fill: #3E9AA6; } .sk-b.L1 path { fill: #1C5A7A; } .sk-b.L2 path { fill: #F15E25; } .sk-b path { stroke: #fff; stroke-width: .16; } .sk-b.on path { stroke: var(--brand-orange); stroke-width: .3; } .sk-b.weak path { stroke: var(--hot); stroke-width: .3; stroke-dasharray: .5 .3; } .sk-pf span { line-height: 1.15; text-align: center; } .sk-angrow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: .5rem; align-items: end; } .sk-angs button { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; } .sk-angs button svg { width: .95rem; height: .95rem; } .sk-angs button:disabled { opacity: .45; cursor: default; } .sk-ccw { transform: scaleX(-1); } .sk-cut { margin: 0; } .sk-hrow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: .5rem; align-items: end; } .sk-hp button { display: grid; justify-items: center; line-height: 1.15; padding-block: .3rem; } .sk-hp small { font-size: .66rem; opacity: .7; } .sk-hall { justify-self: start; } @media (max-width: 520px) { .sk-als { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sk-profs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pr-plan svg { width: 60%; display: block; margin: 0 auto; } @media (max-width: 520px) { .sk-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================================================================== NIGHT MODE — html[data-theme="dark"] (☾ in the top bar, the menu, or N) The interface goes dark for dim halls and large screens; the 3D scene keeps its own time-of-day sky, and the villa card stays a light print. ===================================================================== */ .theme-btn .th-sun { display: none; } html[data-theme="dark"] .theme-btn .th-sun { display: block; } html[data-theme="dark"] .theme-btn .th-moon { display: none; } .theme-btn { color: var(--ink-2); } html[data-theme="dark"] .theme-btn { color: #FFC24B; } html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease !important; } html[data-theme="dark"] { --ink: #E6EEF2; --ink-2: #BCCDD6; --muted: #8DA3AF; --brand: #6CB8DC; --brand-deep: #1F6A8E; --leaf: #4CC48A; --leaf-soft: rgba(76, 196, 138, .14); --bg: #0B1A24; --card: #0F2130; --surface: #142B3B; --soft: #183245; --soft-blue: #193549; --sketch-bg: #172B37; --sel-teal: rgba(99, 195, 197, .14); --sel-teal-2: rgba(99, 195, 197, .22); --sel-leaf: rgba(76, 196, 138, .14); --tint-amber: rgba(242, 165, 65, .16); --tint-amber-2: rgba(242, 165, 65, .1); --tint-red: rgba(228, 87, 46, .2); --tint-red-2: rgba(228, 87, 46, .14); --tint-orange: rgba(241, 94, 37, .16); --tint-purple: rgba(160, 125, 235, .22); --tint-purple-2: rgba(160, 125, 235, .1); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17); --glass: rgba(15, 33, 48, .8); --glass-strong: rgba(15, 33, 48, .95); --shadow: 0 14px 36px rgba(0, 0, 0, .45); --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35); color-scheme: dark; } html[data-theme="dark"] body { background: var(--bg); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--ink); } html[data-theme="dark"] ::placeholder { color: #6F8794; } /* hero: dusk over the villa */ html[data-theme="dark"] .hero { background: linear-gradient(180deg, #0E2335 0%, #24405A 52%, #4B4A50 100%); } html[data-theme="dark"] .hero-shade { background: linear-gradient(90deg, rgba(11, 26, 36, .96) 0%, rgba(11, 26, 36, .86) 36%, rgba(11, 26, 36, 0) 64%); } html[data-theme="dark"][dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(11, 26, 36, .96) 0%, rgba(11, 26, 36, .86) 36%, rgba(11, 26, 36, 0) 64%); } html[data-theme="dark"] .start-card.is-free { background: rgba(20, 43, 59, .86); } html[data-theme="dark"] .lock-out { background: rgba(255, 255, 255, .08); color: var(--ink-2); } html[data-theme="dark"] .lock-out:hover { background: rgba(255, 255, 255, .16); color: #FF9A6B; } html[data-theme="dark"] .hero-top .logo, html[data-theme="dark"] .bottombar .mark { filter: brightness(0) invert(1); opacity: .88; } /* bars and floating glass */ html[data-theme="dark"] .topbar { background: rgba(11, 26, 36, .88); } html[data-theme="dark"] .bottombar { background: rgba(11, 26, 36, .94); } html[data-theme="dark"] .lang-switch, html[data-theme="dark"] .track-switch { background: rgba(255, 255, 255, .07); } html[data-theme="dark"] .progress-track button, html[data-theme="dark"] .tier-bar { background: rgba(255, 255, 255, .13); } html[data-theme="dark"] .progress-track button.done { background: var(--brand-teal); } html[data-theme="dark"] .progress-track button.current { background: var(--brand-orange); } html[data-theme="dark"] .pl-phase { background: rgba(108, 184, 220, .14); } html[data-theme="dark"] .as-bubble { background: rgba(20, 43, 59, .97); } html[data-theme="dark"] .as-fab { background: rgba(20, 43, 59, .94); } html[data-theme="dark"] .as-rules .why-link { background: rgba(108, 184, 220, .12); } html[data-theme="dark"] .toast { background: #1B3A50; border: 1px solid var(--line-2); } html[data-theme="dark"] .modal { background: rgba(2, 8, 12, .62); } html[data-theme="dark"] .scrim { background: rgba(2, 8, 12, .45); } /* buttons */ html[data-theme="dark"] .btn-soft { background: rgba(108, 184, 220, .13); } html[data-theme="dark"] .btn-soft:hover { background: rgba(108, 184, 220, .22); } html[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, .06); } html[data-theme="dark"] .btn-dark:hover { background: #2A7CA3; } html[data-theme="dark"] .chip[aria-pressed="true"] { background: rgba(108, 184, 220, .12); } /* status colours that were written for light tints */ html[data-theme="dark"] .chip-glass.warn { background: rgba(242, 165, 65, .22); color: #FFC77A; } html[data-theme="dark"] .status.moderate, html[data-theme="dark"] .quiz-fb.no { color: #FFC77A; } html[data-theme="dark"] .status.limited, html[data-theme="dark"] .as-bad, html[data-theme="dark"] .reg-chip.bad, html[data-theme="dark"] .rg-st.bad, html[data-theme="dark"] .rg-del { color: #FF9B80; } html[data-theme="dark"] .as-ok { color: #7BDDA8; } html[data-theme="dark"] .badge-exp { color: #CDB8FF; } html[data-theme="dark"] .compass-btns button[aria-pressed="true"] { color: #FF9A6B; } html[data-theme="dark"] .tip { background: var(--tint-orange); } /* diagrams are drawn for paper: they keep a light card so every line and label still reads */ html[data-theme="dark"] .viz-card { background: #E8EEF1; border-color: transparent; color: #0F2A3A; } html[data-theme="dark"] .viz-card .cap { color: #4E6470; } html[data-theme="dark"] .tier-burst { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } /* the villa card is a light print in both modes: its own day colours */ html[data-theme="dark"] .vcard { --ink: #0F2A3A; --ink-2: #2E4A59; --muted: #5E7480; --brand: #1C5A7A; --leaf: #2E9E6B; --surface: #FFFFFF; --line: rgba(15, 42, 58, .10); --line-2: rgba(15, 42, 58, .18); color: var(--ink); } html[data-theme="dark"] .vc-name-row input { color: #0F2A3A; } html[data-theme="dark"] .vc-name-row input::placeholder { color: #8A9DA7; } /* phones: the top bar is full — night mode stays one tap away in the menu */ @media (max-width: 700px) { .topbar .theme-btn { display: none; } } /* night mode hero: the scene's moon would sit behind the language switch */ html[data-theme="dark"] #heroSvg .moon { display: none; } /* the hero's "interactive experience" badge: in the bottom corner, its edge on the top controls' edge (above the gift button when gifts are on); on tablets and phones it sits under the top bar */ .hero-kicker { position: absolute; z-index: 2; margin: 0; bottom: 1.6rem; inset-inline-end: 2.4rem; box-shadow: var(--shadow-sm); } .hero-kicker:has(~ .gift-fab:not([hidden])) { bottom: 7rem; } html.revealing .hero-kicker { animation: revealUp .9s var(--ease) .5s backwards; } html.locked .hero-kicker { visibility: hidden; } @media (max-width: 1024px), (orientation: portrait) and (max-width: 1366px) { .hero-kicker, .hero-kicker:has(~ .gift-fab:not([hidden])) { bottom: auto; top: clamp(5.5rem, 9vw, 8rem); inset-inline-end: auto; inset-inline-start: clamp(1.5rem, 5vw, 6rem); } } /* phones: the hero's top row fits logo, night mode, sign-out and language; the badge steps aside so the title has the room */ @media (max-width: 700px) { .hero-top { padding: 1rem; gap: .5rem; } .hero-top .logo { height: 2.6rem; min-width: 0; } .hero-top-end { gap: .35rem; flex: none; } .hero-top .theme-btn, .hero-top .lock-out { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; justify-content: center; } .hero-top .lang-switch button { padding: 0 .7rem; } .hero-kicker { display: none; } } /* English title: smaller, so it reads on two lines (the Arabic subtitle keeps its size) */ html[lang="en"] .hero h1 { font-size: clamp(1.9rem, 3.1vw, 2.75rem); text-wrap: pretty; } html[lang="en"] .hero h1 .h-alt { font-size: .58em; }