/* ========================================================================== SIM MASTER — BASE: reset, typography, layout + shared primitives ========================================================================== */ /* ========================================================================== SIM MASTER — GLOBAL BASE + SHARED PRIMITIVES ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor jumps must clear the fixed header. */ scroll-padding-top: calc(var(--header-h) + var(--space-lg)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100svh; background-color: var(--surface-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Guards CLAUDE.md §25: "no horizontal overflow exists". Two deliberate choices here, both learned the hard way: 1. `clip`, not `hidden`. `overflow-x: hidden` forces `overflow-y: auto`, which turns the element into a scroll container and breaks `position: sticky` on the header. 2. On the ROOT ELEMENT ONLY, never on . Any non-visible overflow on makes it the containing block for `position: fixed` descendants, which silently breaks the intro overlay and the mobile drawer — they stop tracking the viewport and start tracking the document. Overflow set on the root is propagated to the viewport instead, so the root never becomes a containing block and fixed positioning keeps working. */ html { overflow-x: clip; } @supports not (overflow: clip) { html { overflow-x: hidden; } } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } :target { scroll-margin-top: calc(var(--header-h) + var(--space-lg)); } /* -------------------------------------------------------------------------- 2. Typography primitives -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); text-wrap: balance; } a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; } /* The one focus style for the whole site. Deliberately cyan so a focus ring never reads as ordinary red hover state. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-xs); } /* Never remove the ring for keyboard users; only suppress the mouse ring. */ :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--color-cyan); color: var(--text-on-light); } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--gutter); } .shell--wide { max-width: var(--shell-wide); } .shell--text { max-width: var(--shell-text); } .section { position: relative; padding-block: var(--space-section); } .section--tight { padding-block: var(--space-2xl); } /* Screen-reader-only text that still receives focus when it must. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Section eyebrow — the small monospace "telemetry" label used site-wide -------------------------------------------------------------------------- */ .eyebrow { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--fs-mono-label); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-accent); } .eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--line-strong), transparent); } .eyebrow--center { justify-content: center; } .eyebrow--center::after { display: none; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--text-primary); --btn-border: var(--line-soft); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 3rem; padding: 0.8rem 1.75rem; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); border-radius: var(--radius-btn); font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Primary CTA — "Book Now" everywhere on the site. Redesigned from a flat fill with a diagonal cut corner to a rounded, gradient-filled button with a one-shot light sweep on hover and a small arrow that nudges toward the click. The goal is a button that reads as an invitation, not just a coloured rectangle: it lifts and brightens on hover, presses down convincingly on click, and the arrow gives the eye somewhere to go. */ .btn--primary { --btn-bg: linear-gradient(135deg, var(--action-hover), var(--action) 55%, var(--action-press)); --btn-fg: var(--color-white); --btn-border: rgba(255, 255, 255, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 10px 28px -10px var(--action-glow), 0 2px 8px -2px rgba(0, 0, 0, 0.5); } /* The sweep: a soft diagonal band of light, parked off-canvas to the left and clipped by .btn's own overflow:hidden until hover asks it to cross. */ .btn--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(255, 255, 255, 0.32) 46%, rgba(255, 255, 255, 0.05) 54%, transparent 68% ); transform: translateX(-130%); pointer-events: none; } .btn--primary:hover::before { transform: translateX(130%); /* Routed through a duration token (not a literal) so it collapses along with every other animation under prefers-reduced-motion. */ transition: transform var(--dur-reveal) var(--ease-out); } /* Arrow affordance — a plain glyph, not a class per button, so every existing "Book now" instance across the site picks it up automatically. */ .btn--primary::after { content: "→"; transition: transform var(--dur-base) var(--ease-drive); } .btn--primary:hover::after { transform: translateX(0.3rem); } .btn--primary:hover { --btn-bg: linear-gradient(135deg, #ff2e26, var(--action-hover) 55%, var(--action)); transform: translateY(-2px) scale(1.015); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 16px 36px -10px var(--action-glow), 0 4px 14px -2px rgba(0, 0, 0, 0.55); } .btn--primary:active { --btn-bg: linear-gradient(135deg, var(--action), var(--action-press) 60%, var(--action-press)); transform: translateY(0) scale(0.985); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px -8px var(--action-glow); } /* Deliberately blue, not red: this is the secondary action next to a red primary CTA (e.g. "Saznaj više" beside "Rezerviši termin"), so it needs its own colour rather than inheriting --line-strong, which is red now that red is the site's primary accent. Red-solid-primary vs blue-outline-secondary gives the two button roles a real visual hierarchy instead of two shades of the same colour. */ .btn--ghost { --btn-bg: rgba(0, 201, 255, 0.04); --btn-border: rgba(0, 201, 255, 0.35); } .btn--ghost:hover { --btn-bg: rgba(0, 201, 255, 0.12); --btn-fg: var(--color-cyan-light); --btn-border: var(--color-cyan); } .btn--quiet { --btn-border: var(--line-neutral); --btn-fg: var(--text-secondary); min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.875rem; } .btn--quiet:hover { --btn-fg: var(--text-primary); --btn-border: var(--line-strong); } .btn--block { width: 100%; } /* -------------------------------------------------------------------------- 6. Text link with a sliding underline -------------------------------------------------------------------------- */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none; color: var(--text-accent); padding-block: var(--space-3xs); transition: color var(--dur-fast) var(--ease-out); } .link-arrow svg { transition: transform var(--dur-base) var(--ease-drive); } .link-arrow:hover { color: var(--color-white); } .link-arrow:hover svg { transform: translateX(0.35rem); } /* -------------------------------------------------------------------------- 7. Scroll reveal — the site-wide entrance primitive. JS adds [data-reveal] elements to an IntersectionObserver and flips .is-visible. If JS never runs, the .no-js fallback keeps content shown. -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-2rem); } [data-reveal="right"] { transform: translateX(2rem); } [data-reveal="scale"] { transform: scale(0.96); } [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; } .no-js [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 8. Decorative surfaces shared across sections -------------------------------------------------------------------------- */ /* Faint engineering grid used behind dark sections. */ .grid-backdrop { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--line-faint) 1px, transparent 1px), linear-gradient(to bottom, var(--line-faint) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%); opacity: 0.7; } /* A single hairline with a bright travelling node — the "telemetry" rule. */ .rule-telemetry { position: relative; height: 1px; background: linear-gradient(to right, transparent, var(--line-soft) 18%, var(--line-soft) 82%, transparent); } .card { position: relative; background: linear-gradient(160deg, var(--surface-raised), var(--surface-base)); border: 1px solid var(--line-faint); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { border-color: var(--line-soft); } /* -------------------------------------------------------------------------- 9. Utilities -------------------------------------------------------------------------- */ .text-warm { color: var(--text-warm); } .text-accent { color: var(--text-accent); } .text-secondary { color: var(--text-secondary); } .text-red { color: var(--action-text); } .stack > * + * { margin-block-start: var(--flow, var(--space-md)); } .lede { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; } /* Locks body scroll behind the intro overlay and the mobile drawer. */ .is-locked { overflow: hidden; /* Preserving the scrollbar gutter avoids a layout jump on lock/unlock. */ scrollbar-gutter: stable; }