/* ============================================================================ landing.css - the PUBLIC site surface (/, roadmap, changelog, contact, terms, privacy, auth). BOOTSTRAP IS THE DESIGN SYSTEM - the same vendor/bootstrap.min.css (5.3.3) the app loads, so a logged-in visitor already has it cached. Grid, utilities, buttons, forms, cards, badges, the navbar and the dark theme (data-bs-theme, set by js/theme.js) all come from there. WHAT THIS FILE IS FOR, and nothing else: 1. TOKENS: our palette and typeface mapped onto Bootstrap's CSS variables, for both themes. Changing a colour means changing a variable here, never restyling a Bootstrap class. 2. TYPOGRAPHY: the display sizes for h1/h2 and three text roles (.kicker, .body, .note). 3. THE FEW COMPONENTS BOOTSTRAP DOES NOT HAVE: the blurred fixed nav, the hero with its text halo, the scene boxes, the step number, the form status line, the "todo" marker. HOW TO NOT LET IT EXPLODE: before adding a rule, check Bootstrap's utilities (d-flex, gap-3, text-body-secondary, py-4, ...) and components (.btn, .form-control, .card, .badge). If it exists there, it goes in the markup, not here. If a rule sets width, columns or a breakpoint, it is layout and belongs in the markup as a grid class. ============================================================================ */ /* ---- the typeface ----------------------------------------------------------------------------- Inter, self-hosted, because of ROMANIAN DIACRITICS specifically. ș (U+0219) and ț (U+021B) are comma-below letters, and many fonts ship the CEDILLA forms (ş U+015F, ţ U+0163) or nothing at all. When the font lacks the glyph the browser silently substitutes a different font for those two letters only - which is why "acoperișul tău" looked bolder and mismatched in the middle of a word. No system-font stack can fix that: it depends on whatever happens to be installed on the reader's machine, so it looks different for everyone and correct for nobody. Shipping the font makes the glyphs ours. Two subsets: latin covers â/î (Latin-1) and latin-ext covers ă, ș, ț - the page needs BOTH, and unicode-range means a reader only downloads what the text actually uses. OFL-licensed (free to embed and redistribute) and served from our own origin, not Google's CDN - the privacy policy says no third-party tracking, and a Google Fonts CDN request hands every visitor's IP to Google. */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/vendor/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/vendor/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308, U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---- tokens --------------------------------------------------------------- Our palette, then Bootstrap's variables pointed at it. The greys mirror css/style.css so the two surfaces cannot drift apart. The ACCENT deliberately does not: style.css flips its primary to blue in dark mode, while favicon.ico and logo.png are orange in both. On a marketing page the brand mark and the main button being different colours reads as a bug, so here the accent is fixed and only the greys respond to the theme. -------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { --bg:#f9f9f9; --bg2:#f0f0f0; --surface:#fff; --border:rgba(0,0,0,.12); --text:#0f0f0f; --text2:#3d3d3d; --text3:#5c5c5c; --accent:#e07b00; --accent-hover:#c46b00; --accent-rgb:224,123,0; --ok:#3f9e6a; --err:#c0603a; /* The hero halo. Light theme = dark text, so the outline is WHITE; it inverts below. */ --halo:rgba(255,255,255,.92); --halo-wide:rgba(255,255,255,.75); --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-secondary-color:var(--text2); --bs-tertiary-color:var(--text3); --bs-tertiary-bg:var(--bg2); --bs-secondary-bg:var(--bg2); --bs-border-color:var(--border); --bs-border-color-translucent:var(--border); --bs-link-color-rgb:61,61,61; --bs-link-hover-color-rgb:var(--accent-rgb); --bs-primary:var(--accent); --bs-primary-rgb:var(--accent-rgb); --bs-success:var(--ok); --bs-success-rgb:63,158,106; --bs-danger:var(--err); --bs-danger-rgb:192,96,58; --bs-focus-ring-color:rgba(var(--accent-rgb),.25); /* Inter first for the diacritics; the system stack behind it so the page is readable before the font arrives (font-display:swap) and if it never does. The emoji and symbol faces are named explicitly - without them a page using ⚠ or ✓ falls through to whatever the browser picks. */ --bs-body-font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue", Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif; } [data-bs-theme="dark"] { --bg:#1c1c1e; --bg2:#2c2c2e; --surface:#2c2c2e; --border:rgba(255,255,255,.1); --text:#f5f5f7; --text2:#cfcfd4; --text3:#aeaeb4; --halo:rgba(0,0,0,.88); --halo-wide:rgba(0,0,0,.65); --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-secondary-color:var(--text2); --bs-tertiary-color:var(--text3); --bs-tertiary-bg:var(--bg2); --bs-secondary-bg:var(--bg2); --bs-border-color:var(--border); --bs-border-color-translucent:var(--border); --bs-link-color-rgb:207,207,212; --bs-link-hover-color-rgb:var(--accent-rgb); } body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .container { max-width:76rem; } /* the one grid value this site sets */ /* Bootstrap's components carry their colours as component variables that do NOT follow --bs-primary at runtime (they are baked at build). Point the ones we use at the tokens. */ .btn { --bs-btn-border-radius:12px; --bs-btn-font-weight:600; --bs-btn-padding-x:1.625rem; --bs-btn-padding-y:.9rem; } .btn-sm { --bs-btn-border-radius:9px; --bs-btn-padding-x:.875rem; --bs-btn-padding-y:.5rem; --bs-btn-font-size:13px; } .btn-primary { --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:var(--accent-hover); --bs-btn-hover-border-color:var(--accent-hover); --bs-btn-active-bg:var(--accent-hover); --bs-btn-active-border-color:var(--accent-hover); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; --bs-btn-focus-shadow-rgb:var(--accent-rgb); } .btn-outline-secondary { --bs-btn-color:var(--text2); --bs-btn-border-color:var(--border); --bs-btn-hover-bg:var(--bg2); --bs-btn-hover-color:var(--text); --bs-btn-hover-border-color:var(--border); --bs-btn-active-bg:var(--bg2); --bs-btn-active-color:var(--text); --bs-btn-active-border-color:var(--border); } .card { --bs-card-bg:var(--surface); --bs-card-border-color:var(--border); --bs-card-border-radius:12px; --bs-card-spacer-y:1.125rem; --bs-card-spacer-x:1.25rem; --bs-card-title-spacer-y:.375rem; } .form-control { font-size:14px; padding:.625rem .75rem; border-radius:9px; background:var(--surface); } .form-control:focus { border-color:var(--accent); box-shadow:0 0 0 .25rem rgba(var(--accent-rgb),.2); } .badge { --bs-badge-font-size:11px; --bs-badge-font-weight:500; --bs-badge-padding-x:9px; --bs-badge-padding-y:3px; } /* ---- typography ---------------------------------------------------------- */ h1 { font-size:clamp(30px,5.2vw,56px); font-weight:600; line-height:1.08; letter-spacing:-.02em; max-width:17ch; margin:0 0 1rem; text-wrap:balance; } h2 { font-size:clamp(24px,3.4vw,38px); font-weight:600; line-height:1.15; letter-spacing:-.01em; max-width:20ch; margin:0 0 1rem; text-wrap:balance; } h3 { font-size:1rem; font-weight:600; margin:0 0 .3rem; } /* a heading that follows running text (the legal pages' numbered clauses) needs air above it */ .body + h3, p + h3 { margin-top:1.75rem; } .kicker { font-size:12px; font-weight:500; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; } .body { font-size:1rem; color:var(--text2); line-height:1.65; max-width:58ch; text-wrap:pretty; margin:0; } .body + .body { margin-top:.875rem; } .note { font-size:12px; color:var(--text3); margin:0; } .text-center h2, .text-center .body { margin-inline:auto; max-width:none; } section { padding:clamp(56px,9vw,104px) 0; } .rule { border:0; border-top:0.5px solid var(--border); margin:0; opacity:1; } /* the nav lives in css/chrome.css - one bar for the site, Simple and Pro */ /* ---- hero ---------------------------------------------------------------- */ .hero { position:relative; height:100svh; min-height:560px; } .hero-scene { position:absolute; inset:0; } /* No scrim. The gradient that used to sit here darkened the bottom of the scene to make the copy legible, which meant hiding the thing the page is selling. Four stacked shadows do the same job locally: a tight dark one for edge contrast against light pixels, then progressively larger and softer ones that lift the text off a busy background without touching the image. */ /* The copy floats over the scene and MUST NOT capture the pointer, or the scene stops being draggable everywhere the text block happens to reach. `.hero-copy` alone is not enough: its .container child is a full-width block, so giving that pointer-events:auto handed the whole strip beside the headline back to the text and killed the drag. Only things you actually click get the pointer back. */ .hero-copy { position:absolute; inset:auto 0 0; z-index:5; padding:0 0 3.5rem; pointer-events:none; } .hero-copy a, .hero-copy .btn { pointer-events:auto; } /* The shadow system from tenispremium.ro's .hero-title, read off the live page rather than guessed. Four shadows at the four DIAGONAL offsets build an even outline in every direction - that is what separates the letterforms from a busy background - and the fifth, wide and soft, lifts the whole block off the image. A stack of downward drop-shadows (what I built first) does not do this: it darkens below each glyph and leaves the top edges to fight the background on their own. */ .hero-copy h1, .hero-copy .hero-sub, .hero-copy .hero-spec, .hero-copy .note { text-shadow: 2px 2px 4px var(--halo), -2px -2px 4px var(--halo), 2px -2px 4px var(--halo), -2px 2px 4px var(--halo), 0 0 22px var(--halo-wide); } /* The hero copy DOES follow the theme, now that the 3D scene does too. It briefly did not: when the scene was dark in both themes, white text was the only readable choice. Making the scene themeable inverted that - white text over a pale scene is just as unreadable as black over a dark one. The halo colour inverts with it, so the outline always contrasts with the text rather than the page. */ .hero-copy h1 { color:var(--text); } .hero-copy .hero-sub { color:var(--text); } .hero-copy .hero-spec, .hero-copy .note { color:var(--text2); } .hero-sub { font-size:clamp(15px,1.7vw,19px); color:var(--text2); max-width:56ch; line-height:1.55; margin:0 0 .875rem; text-wrap:pretty; } /* The method line. Deliberately small and grey: it is there to be READ by someone checking whether the tool is serious, not to sell. It carries the specifics the subtitle cannot. */ .hero-spec { font-size:13px; color:var(--text3); max-width:62ch; line-height:1.6; margin:0 0 1.625rem; } /* A framed scene inside the page flow (the proof section, the auth page). Height is the one thing the markup cannot express with a utility, and scene3d.js sizes its canvas from the host. */ .scene-box { height:420px; border-radius:14px; overflow:hidden; border:0.5px solid var(--border); } /* auth.html: the box fills the viewport under the fixed nav minus the column's own padding, so its top edge sits a gutter below the menu and its right edge on the container's margin. */ .auth { padding-top:66px; } .auth-scene { height:calc(100svh - 66px - 3rem); } .auth-panel { max-width:440px; } /* ---- the step number (the "how it works" row) ---------------------------- */ .step-n { flex:0 0 34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--bg2); border:0.5px solid var(--border); font-size:14px; font-weight:600; color:var(--accent); } /* ---- form status line (newsletter, contact, auth): the JS sets data-state --- */ .form-msg { font-size:13px; margin:0; min-height:1.2em; } .form-msg[data-state="ok"] { color:var(--ok); } .form-msg[data-state="err"] { color:var(--err); } /* ---- page head (the sub-pages, which have no hero) ----------------------- */ .page-head { padding:calc(72px + clamp(40px,7vw,80px)) 0 clamp(32px,5vw,56px); } /* ---- footer -------------------------------------------------------------- */ footer { padding:2.5rem 0 3.5rem; border-top:0.5px solid var(--border); font-size:13px; color:var(--text3); } /* ---- unresolved content, visible on purpose ------------------------------ */ .todo { background:rgba(var(--accent-rgb),.12); border:0.5px dashed rgba(var(--accent-rgb),.5); color:#e6a252; border-radius:6px; padding:1px 7px; font-size:12px; }