/* Hero Leo Tour — EN homepage hero scene (Home_v2.cshtml), R4 11.09.2026 (12 frames). Class names use leo-tour-* naming. This section deliberately does NOT follow the --vp-* theme (user decision, 10.09.2026): it carries its own dark palette in both light and dark theme. Every colour still goes through a token below — no literal colour values outside this :root block (CLAUDE.md §3). Existing --vp-* tokens are untouched. */ :root { /* base channels */ --leo-ink-rgb: 6 13 32; --leo-white-rgb: 255 255 255; --leo-accent-rgb: 45 156 255; --leo-accent-hi-rgb: 96 190 255; /* CTA channels: saturated electric blue. The fill runs left to right, from a softer blue into the deeper end. Neither end drifts toward violet or navy; the edge is a lighter blue that lifts the button off the card. */ --leo-cta-left-rgb: 71 140 221; --leo-cta-bottom-rgb: 10 118 245; --leo-cta-edge-rgb: 152 212 255; --leo-accent-soft-rgb: 132 199 255; --leo-violet-rgb: 141 96 246; --leo-green-rgb: 34 197 137; --leo-teal-rgb: 46 198 198; --leo-amber-rgb: 240 170 60; --leo-rose-rgb: 244 96 112; /* Bluebook question maroon — the dark-theme --color-maroon of wwwroot/css/shared/questionbank-related/questionbank-bb-format.css (#8b3a4a), so the frame 5 miniature speaks the portal's real question language. */ --leo-maroon-rgb: 139 58 74; /* Frame 5 mirrors the real question screen, which is a LIGHT surface: these are its own channels so the light panel never borrows the dark palette. */ --leo-qb-page-rgb: 238 241 246; --leo-qb-card-rgb: 252 253 255; --leo-qb-ink-rgb: 28 38 60; --leo-qb-dim-rgb: 86 100 128; --leo-qb-black-rgb: 22 26 36; --leo-qb-amber-rgb: 222 138 16; --leo-qb-lav-rgb: 230 232 245; /* surfaces */ --leo-bg-color: rgb(var(--leo-ink-rgb)); --leo-bg-image: url("/images/main/homepage/leo/Leo%20BG.webp"); --leo-surface-color: rgb(var(--leo-white-rgb) / .05); --leo-surface-strong-color: rgb(var(--leo-white-rgb) / .10); --leo-shadow-color: rgb(var(--leo-ink-rgb) / .55); /* --- One neon language, used everywhere (demo reference) --- Edges are saturated blue, not pale; every raised surface gets the same single glow token plus the same thin inner top line. Do not stack extra shadow layers per component — compose these. */ --leo-neon-color: rgb(var(--leo-accent-rgb) / .58); --leo-neon-strong-color: rgb(var(--leo-accent-rgb) / .85); --leo-glow: 0 0 14px rgb(var(--leo-accent-rgb) / .22), 0 8px 24px rgb(var(--leo-ink-rgb) / .45); --leo-glow-strong: 0 0 22px rgb(var(--leo-accent-rgb) / .48), 0 10px 28px rgb(var(--leo-ink-rgb) / .5); --leo-glow-hover: 0 0 26px rgb(var(--leo-accent-rgb) / .60), 0 10px 28px rgb(var(--leo-ink-rgb) / .5); --leo-inner-line: inset 0 1px 0 rgb(var(--leo-white-rgb) / .22); --leo-fill-grad: linear-gradient(135deg, rgb(var(--leo-accent-rgb)), rgb(var(--leo-accent-hi-rgb))); --leo-cta-grad: linear-gradient(90deg, rgb(var(--leo-cta-left-rgb)), rgb(var(--leo-cta-bottom-rgb))); --leo-cta-edge-color: rgb(var(--leo-cta-edge-rgb) / .85); --leo-cta-glow-hover: 0 0 10px rgb(var(--leo-cta-left-rgb) / .45), 0 4px 12px rgb(var(--leo-cta-bottom-rgb) / .45); /* ink wash for a badge sitting inside a bright fill, and the zero-alpha start the ring animation interpolates from */ --leo-on-fill-wash-color: rgb(var(--leo-ink-rgb) / .24); --leo-dot-glow-color: rgb(var(--leo-accent-rgb) / .70); --leo-spine-color: rgb(var(--leo-white-rgb) / .45); /* card shell */ --leo-card-border-color: rgb(var(--leo-accent-rgb) / .68); --leo-card-glow: 0 0 0 1px rgb(var(--leo-accent-rgb) / .18), 0 0 52px rgb(var(--leo-accent-rgb) / .32), 0 26px 62px rgb(var(--leo-ink-rgb) / .58); --leo-head-scrim: linear-gradient(180deg, rgb(var(--leo-ink-rgb) / .84) 36%, rgb(var(--leo-ink-rgb) / 0)); --leo-nav-scrim: linear-gradient(180deg, rgb(var(--leo-ink-rgb) / 0), rgb(var(--leo-ink-rgb) / .82)); /* glass — for small overlays that sit on top of the figure */ --leo-glass-bg: rgb(var(--leo-ink-rgb) / .26); /* Overlay surfaces sit on the figure and on the background photo, and they are real glass: roughly a third of the ink is laid down, so what is behind stays visible through them. Legibility comes from the blur and from the saturation lift that keeps the colour behind alive, not from the fill. */ --leo-glass-panel-bg: rgb(var(--leo-ink-rgb) / .34); --leo-glass-blur: blur(16px) saturate(150%); /* accents */ --leo-accent-color: rgb(var(--leo-accent-rgb)); --leo-accent-soft-color: rgb(var(--leo-accent-soft-rgb)); --leo-accent-wash-color: rgb(var(--leo-accent-rgb) / .16); --leo-halo-color: rgb(var(--leo-accent-rgb) / .30); --leo-track-color: rgb(var(--leo-white-rgb) / .18); /* text */ --leo-heading-color: rgb(var(--leo-white-rgb)); --leo-text-color: rgb(230 239 255); --leo-text-dim-color: rgb(166 187 224); --leo-note-color: rgb(var(--leo-accent-soft-rgb) / .92); --leo-note-shadow-color: rgb(var(--leo-ink-rgb) / .88); /* Notlar Leo'nun uzerinden geciyor ve kutulari yok (kullanici karari), o yuzden okunurluklari tamamen golgeden geliyor. Bu, harflerin dibine oturan TAM guclu murekkep: soluk italik yazi, figuru lacivert takimindan da acik tenli yuzunden de bagimsiz sekilde ayrisiyor. */ --leo-note-halo-color: rgb(var(--leo-ink-rgb)); --leo-corner-color: rgb(var(--leo-accent-soft-rgb) / .60); --leo-emblem-glow-color: rgb(var(--leo-accent-rgb) / .50); /* speech bubble (light on dark) */ --leo-bubble-bg: rgb(var(--leo-white-rgb) / .96); --leo-bubble-text-color: rgb(38 52 82); --leo-bubble-head-color: rgb(14 25 50); --leo-bubble-border-color: rgb(var(--leo-white-rgb) / .70); /* status + gradient icon tiles */ --leo-ok-color: rgb(var(--leo-green-rgb)); --leo-ok-wash-color: rgb(var(--leo-green-rgb) / .16); --leo-warn-color: rgb(var(--leo-amber-rgb)); --leo-warn-wash-color: rgb(var(--leo-amber-rgb) / .18); --leo-bad-color: rgb(var(--leo-rose-rgb)); --leo-maroon-color: rgb(var(--leo-maroon-rgb)); --leo-maroon-ink-color: rgb(var(--leo-white-rgb)); --leo-qb-page-color: rgb(var(--leo-qb-page-rgb)); --leo-qb-card-color: rgb(var(--leo-qb-card-rgb)); --leo-qb-ink-color: rgb(var(--leo-qb-ink-rgb)); --leo-qb-dim-color: rgb(var(--leo-qb-dim-rgb)); --leo-qb-line-color: rgb(var(--leo-qb-ink-rgb) / .16); --leo-qb-black-color: rgb(var(--leo-qb-black-rgb)); --leo-qb-amber-color: rgb(var(--leo-qb-amber-rgb)); --leo-qb-amber-wash-color: rgb(var(--leo-qb-amber-rgb) / .20); --leo-qb-amber-line-color: rgb(var(--leo-qb-amber-rgb) / .55); --leo-qb-lav-color: rgb(var(--leo-qb-lav-rgb)); --leo-qb-mute-color: rgb(var(--leo-qb-card-rgb) / .72); --leo-qb-ok-wash-color: rgb(var(--leo-green-rgb) / .18); --leo-qb-dim-fill-color: rgb(var(--leo-qb-ink-rgb) / .06); --leo-tile-blue-grad: linear-gradient(135deg, rgb(var(--leo-accent-rgb)), rgb(var(--leo-violet-rgb))); --leo-tile-violet-grad: linear-gradient(135deg, rgb(var(--leo-violet-rgb)), rgb(var(--leo-accent-rgb))); --leo-tile-green-grad: linear-gradient(135deg, rgb(var(--leo-green-rgb)), rgb(var(--leo-accent-rgb))); --leo-tile-teal-grad: linear-gradient(135deg, rgb(var(--leo-teal-rgb)), rgb(var(--leo-accent-rgb))); --leo-bar-grad: linear-gradient(90deg, rgb(var(--leo-accent-rgb)), rgb(var(--leo-violet-rgb))); } @property --leo-ring { syntax: ""; inherits: false; initial-value: 0%; } /* --- Scene shell: the whole tour is ONE card, vertically centred in the hero column. Leo is clipped by the card's bottom edge. --- */ .leo-tour { --leo-pad-x: clamp(14px, 2.1vw, 26px); --leo-pad-top: clamp(34px, 5.2vh, 70px); /* Must stay ABOVE the nav strip's own height, which is height-clamped too (~38px at 600, ~52px at 950), otherwise a frame's last row renders behind it. That was the frame 2 / 9 clipping. */ --leo-pad-bottom: clamp(40px, 5.6vh, 70px); /* Figure height = the stage row + the bottom padding it bleeds into + the rise, times the scale. The stage starts UNDER the title and subtitle, so those can never sit on Leo's fur. --leo-fig-rise lets him climb back up behind the glass feature strip only (R4 1b + 1c), which is how he reaches ~72-76% of the card height without touching the type. A figure that tall is ~58% of the card wide, so the body column is capped at 50% opposite. */ --leo-fig-scale: .98; --leo-fig-rise: 0px; /* How far the figure hangs off its own edge of the card. The more it hangs out, the narrower the slice of him that competes with the copy column. */ --leo-fig-edge: -6%; --leo-body-w: 65%; /* Scene rhythm is tied to viewport HEIGHT, not width: a 768px-tall laptop gets tighter rows, a 950px one gets the full size. The type itself has a 0.75rem floor everywhere — below that the tour stops being readable. */ --leo-scene-font: clamp(.8125rem, 1.45vh, .875rem); --leo-qb-font: clamp(.75rem, 1.25vh, .8125rem); --leo-sub-font: clamp(.875rem, 1.55vh, .9375rem); --leo-bubble-font: 1rem; --leo-bubble-head-font: 1rem; --leo-panel-pad: clamp(6px, 1.26vh, 12px); --leo-panel-gap: clamp(4px, 1.05vh, 10px); --leo-body-gap: clamp(4px, .95vh, 9px); --leo-row-pad: clamp(3px, .84vh, 8px); position: relative; /* The card starts 101px down the page (77px header + hero padding), so its height is what is actually left on screen minus ~17px of breathing room, and never more than 85dvh. Below a 640px viewport even that is unreadable, so 520px is an absolute floor: there the page scrolls a few pixels, which beats unreadable type. dvh, because vh lies while mobile chrome collapses. 1536x740 -> 622 1366x640 -> 522 1280x600 -> 520 1440x950 -> 808 */ height: max(520px, min(85dvh, calc(100dvh - 118px))); margin: 24px 0; overflow: hidden; isolation: isolate; border: 1px solid var(--leo-card-border-color); border-radius: 28px; background: var(--leo-bg-color); box-shadow: var(--leo-card-glow); color: var(--leo-text-color); font-size: clamp(.8125rem, 1.4vh, .875rem); } .leo-tour__bg { position: absolute; inset: 0; z-index: 0; background-image: var(--leo-bg-image); background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; } /* thin light line along the inner top edge, as in the demo */ .leo-tour::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: var(--leo-inner-line); pointer-events: none; } /* --- Fixed card furniture: two spaced-out corner lines + brand emblem --- */ .leo-tour__corner { position: absolute; top: clamp(5px, 1.1vh, 16px); z-index: 3; max-width: 114px; color: var(--leo-corner-color); font-size: clamp(6.5px, .95vh, 9px); font-weight: 500; letter-spacing: .18em; line-height: 1.7; } .leo-tour__corner--start { left: var(--leo-pad-x); } .leo-tour__corner--end { right: var(--leo-pad-x); text-align: right; } .leo-tour__corner::after { content: ""; display: block; width: 22px; height: 1px; margin-top: clamp(2px, .55vh, 6px); background: var(--leo-corner-color); } .leo-tour__corner--end::after { margin-left: auto; } /* The source logo is a cream-to-black gradient wreath with black lettering, so its lower half disappears on the navy card. brightness(0) flattens every opaque pixel to black and invert(1) lifts it to white, leaving one even pale silhouette — the demo's emblem treatment — with the PNG itself untouched. */ .leo-tour__emblem { position: absolute; top: clamp(5px, .9vh, 9px); left: 50%; z-index: 3; width: auto; height: clamp(22px, 3.9vh, 44px); transform: translateX(-50%); filter: brightness(0) invert(1) drop-shadow(0 0 9px var(--leo-emblem-glow-color)); opacity: .94; } /* --- Frames: absolutely stacked so switching never changes card height. ---- The card's stacking map, top layer first (R6) ---- .leo-tour__dwellbar 5 auto-advance hairline .leo-tour::after 5 inner top light line .leo-tour__nav 4 arrows, counter, progress dots .leo-tour__corner 3 card furniture .leo-tour__emblem 3 .leo-tour__viewport 1 the frames .leo-tour__bg 0 and inside a frame, again top first (R7: head and stage swapped levels, so the head band's glass strip stopped covering the bubble; both keep their own stacking context, nothing was flattened): .leo-tour__stage 2 the figure and the copy column .leo-tour__bubble 3 what Leo is saying wins over Leo himself .leo-tour__leo 2 Leo wins over every content block body content blocks 1 panels, badges, offers, guides, stats, gates .leo-tour__head 1 title, subtitle and the glass feature strip So the copy can no longer bury the figure, the figure can no longer bury the line he is speaking, and the strip can no longer bury either. --- */ .leo-tour__viewport { position: absolute; inset: 0; z-index: 1; } .leo-tour__frame { --leo-run: paused; position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(4px, 1.05vh, 16px); padding: var(--leo-pad-top) var(--leo-pad-x) var(--leo-pad-bottom); } .leo-tour__frame[hidden] { display: none; } /* Sketch timing hook: JS marks the visible frame with .is-active; the :not([hidden]) pair keeps the sequence alive if only hidden is toggled. */ .leo-tour__frame.is-active, .leo-tour__frame:not([hidden]) { --leo-run: running; } /* A feature strip makes the head band taller, so the figure under it may rise behind the strip; frames without one simply stay a touch shorter. */ .leo-tour__frame:has(.leo-tour__strip) { --leo-fig-scale: 1; --leo-fig-rise: 58px; } /* --- Stage: the room under the title. It is the figure's containing block and it vertically centres the copy, so no frame leaves its lower half empty. --- */ .leo-tour__stage { position: relative; z-index: 2; min-height: 0; display: flex; align-items: center; } /* --- Leo: bottom-flush, clipped by the card, IN FRONT of the content blocks and BEHIND his own speech bubble. He is the narrator: on a narrow screen the copy column takes the whole card width and he would otherwise be buried under it. --- */ .leo-tour__leo { position: absolute; bottom: calc(-1 * var(--leo-pad-bottom)); z-index: 2; width: auto; height: calc((100% + var(--leo-pad-bottom) + var(--leo-fig-rise)) * var(--leo-fig-scale) * var(--leo-fig-zoom, 1)); object-fit: contain; object-position: bottom center; filter: drop-shadow(0 0 36px var(--leo-halo-color)) drop-shadow(0 16px 30px var(--leo-shadow-color)); animation: leoFigIn .55s ease-out both; pointer-events: none; } .leo-tour__frame--left .leo-tour__leo { left: var(--leo-fig-edge); } .leo-tour__frame--right .leo-tour__leo { right: var(--leo-fig-edge); } /* frame 1 carries the tallest head band (slogan + title + sub + 4-cell strip) */ .leo-tour__frame[data-leo-frame="1"] { --leo-fig-rise: 60px; } .leo-tour__frame[data-leo-frame="1"] .leo-tour__leo { left: -4%; } /* Frames 2-11 are the explaining frames: the copy column is the content and Leo is beside it, never under it. Most of the work is done by hanging him further off the card edge — the hand he points with is on the INNER side, so what leaves the card is the outer half. The scale only trims the rest. (0,4,0) beats the :has(.leo-tour__strip) rule above on purpose: frames 7 and 10 shrink with the others and keep their own --leo-fig-rise. Frames 1 and 12 are compositions of their own and stay out of it. */ .leo-tour__frame:not([data-leo-frame="1"]):not([data-leo-frame="12"]) { --leo-fig-scale: .88; --leo-fig-edge: -14%; } .leo-tour__frame[data-leo-frame="12"] { --leo-fig-scale: .98; --leo-fig-edge: -6%; } /* Frame 6 only: the figure is mirrored so the hand he points with faces the copy column instead of the card edge. A bare `transform` on the image is not enough — .leo-tour__leo runs leoFigIn with `both`, and an animation with a fill owns the transform for the whole of its lifetime — so the frame swaps in a mirrored copy of the same keyframe and keeps the shorthand's duration, easing and fill. In reduced motion the animation is switched off and the static declaration below is what holds the mirror. */ .leo-tour__frame[data-leo-frame="6"] .leo-tour__leo { transform: rotateY(180deg); animation-name: leoFigInFlip; } /* --- Head band: two-tone title, centred, one level UNDER the stage --- */ .leo-tour__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .74vh, 7px); text-align: center; } .leo-tour__head::before { content: ""; position: absolute; inset: calc(-1 * var(--leo-pad-top)) calc(-1 * var(--leo-pad-x)) -26px; z-index: -1; background: var(--leo-head-scrim); pointer-events: none; } .leo-tour__slogan { margin: 0; color: var(--leo-note-color); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .8125rem; } .leo-tour__title-row { display: flex; justify-content: center; align-items: center; max-width: 100%; } .leo-tour__frame h2 { /* home.css .vp-hero h2 ayni ozgullukte; margin ve max-width oradan siziyor. */ margin: 0; max-width: none; color: var(--leo-heading-color); font-size: clamp(15px, min(2.1vw, 3.05vh), 29px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-align: center; text-transform: uppercase; } /* frame 1 is the brand plate, not a step title: it carries the name and what the platform is, so it runs at h1 scale. Two short lines, one each. */ /* "WELCOME TO VERITYPREP" is 21 uppercase characters and has to hold one line: the cap is what keeps it off a third row, which would eat the body. */ .leo-tour__frame[data-leo-frame="1"] h2 { font-size: clamp(17px, min(2.7vw, 3.8vh), 34px); } .leo-tour__accent { color: var(--leo-accent-color); } .leo-tour__sub { margin: 0; max-width: 46ch; color: var(--leo-text-dim-color); font-size: var(--leo-sub-font); line-height: 1.4; } /* --- Pill feature strip: glass so it stays readable over the figure --- */ .leo-tour__strip { position: relative; display: flex; align-items: stretch; max-width: 100%; border: 1px solid var(--leo-neon-color); border-radius: 999px; background: var(--leo-glass-bg); backdrop-filter: var(--leo-glass-blur); box-shadow: var(--leo-glow), var(--leo-inner-line); } .leo-tour__strip-cell { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 13px; color: var(--leo-text-color); font-size: clamp(.75rem, 1.158vh, .8125rem); line-height: 1.3; text-align: left; animation: leoPop .42s ease-out both; animation-delay: calc(var(--leo-i, 0) * 110ms); } .leo-tour__strip-cell + .leo-tour__strip-cell { border-left: 1px solid var(--leo-neon-color); } .leo-tour__strip-cell i { flex: 0 0 auto; color: var(--leo-accent-soft-color); font-size: clamp(.75rem, 1.579vh, .9375rem); } .leo-tour__strip-label { min-width: 0; } /* --- Body column: bubble + scene cards, on the free side of the card. The column deliberately has NO z-index of its own: a stacking context here would trap the bubble below Leo, who lives one level up on the stage. With z-index auto the column's children join the stage's stack, which is where the bubble (3) / Leo (2) / content (1) order is decided. --- */ .leo-tour__body { position: relative; display: flex; flex-direction: column; gap: var(--leo-body-gap); width: var(--leo-body-w); min-width: 0; } /* Every block in the column except the bubble reads behind Leo. */ .leo-tour__body > *:not(.leo-tour__bubble) { position: relative; z-index: 1; } .leo-tour__frame--left .leo-tour__body { margin-left: auto; } .leo-tour__frame--right .leo-tour__body { margin-right: auto; } /* ---- Per-frame body width. Everything else takes --leo-body-w from .leo-tour above (65%). To widen or narrow a single frame later, add one line here; the tablet and mobile queries override every frame with a single catch-all, so a new line needs no mobile counterpart. There is no desktop height query any more: the width is the same at every screen size. Frame 3 is spelled out at the current default on purpose, so it keeps 65% if the default ever moves. ---- */ .leo-tour__frame[data-leo-frame="1"] { --leo-body-w: 50%; } .leo-tour__frame[data-leo-frame="3"] { --leo-body-w: 65%; } .leo-tour__frame[data-leo-frame="6"] { --leo-scene-font: .8125rem; } /* Dense frames (3, 4, 8, 10) carry a multi-row panel plus a long bubble; they give back a couple of pixels per row so the last row stays clear of the nav strip. No content is dropped here - only rhythm. */ .leo-tour__frame--dense { --leo-scene-font: clamp(.75rem, 1.25vh, .8125rem); --leo-panel-pad: clamp(8px, 1.1vh, 11px); --leo-panel-gap: clamp(6px, .9vh, 8px); --leo-body-gap: clamp(5px, .85vh, 8px); --leo-row-pad: clamp(4px, .7vh, 6px); } .leo-tour__frame--dense .leo-tour__rcard { gap: 2px; } /* Sparse frames breathe: wider card padding, bigger scene type, bigger gaps. */ .leo-tour__frame--airy { --leo-scene-font: clamp(.8125rem, 1.5vh, .9375rem); --leo-panel-pad: clamp(11px, 1.6vh, 15px); --leo-panel-gap: clamp(8px, 1.3vh, 12px); --leo-body-gap: clamp(8px, 1.3vh, 11px); } /* --- Speech bubble: white, dark text, tail pointing at Leo. It is the line he is speaking, so it is the one thing in the frame that even Leo does not cover: top of the frame's stack. --- */ .leo-tour__bubble { position: relative; z-index: 3; padding: var(--leo-panel-pad) calc(var(--leo-panel-pad) + 2px); border: 1px solid var(--leo-bubble-border-color); border-radius: 16px; background: var(--leo-bubble-bg); color: var(--leo-bubble-text-color); font-size: var(--leo-bubble-font); line-height: 1.42; animation: leoPop .42s ease-out both; } .leo-tour__bubble::after { content: ""; position: absolute; top: 22px; width: 15px; height: 15px; background: var(--leo-bubble-bg); transform: rotate(45deg); } .leo-tour__frame--left .leo-tour__bubble::after { left: -7px; border-left: 1px solid var(--leo-bubble-border-color); border-bottom: 1px solid var(--leo-bubble-border-color); } .leo-tour__frame--right .leo-tour__bubble::after { right: -7px; border-top: 1px solid var(--leo-bubble-border-color); border-right: 1px solid var(--leo-bubble-border-color); } .leo-tour__bubble-head { display: block; margin-bottom: 2px; color: var(--leo-bubble-head-color); font-size: var(--leo-bubble-head-font); font-weight: 700; } .leo-tour__bubble-text { display: block; } .leo-tour__type { display: inline; } /* --- Handwritten-feel margin notes: loose on the background, no box (demo). Legibility over the figure comes from a text shadow, never a border. --- */ .leo-tour__note { position: absolute; z-index: 2; margin: 0; max-width: 132px; color: var(--leo-note-color); /* Dort kat, en icteki harflerin konturuna yapisik: 2px'lik tam guclu murekkep figurun acik bolgelerinde (yuz, gomlek) yaziyi ayirir, disaridaki genis ve yumusak katlar da lacivert takim gibi koyu bolgelerde yazinin etrafina kendi karartmasini serer. Kutu yok - dosyanin kurali. */ text-shadow: 0 0 2px var(--leo-note-halo-color), 0 1px 3px var(--leo-note-shadow-color), 0 0 8px var(--leo-note-halo-color), 0 0 18px var(--leo-note-shadow-color); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .8125rem; line-height: 1.35; animation: leoFade .6s ease-out .5s both; } .leo-tour__note--bl { bottom: calc(var(--leo-pad-bottom) + 10px); left: var(--leo-pad-x); transform: rotate(-3deg); } .leo-tour__note--br { bottom: calc(var(--leo-pad-bottom) + 10px); right: var(--leo-pad-x); text-align: right; transform: rotate(3deg); } /* --- Generic scene card surface: neon edge, soft glow, inner top line --- */ .leo-tour__panel { position: relative; padding: var(--leo-panel-pad) calc(var(--leo-panel-pad) + 1px); border: 1px solid var(--leo-neon-color); border-radius: 14px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); box-shadow: var(--leo-glow), var(--leo-inner-line); display: flex; flex-direction: column; gap: var(--leo-panel-gap); } .leo-tour__foot { margin: 0; color: var(--leo-text-dim-color); font-size: clamp(.75rem, 1.105vh, .8125rem); line-height: 1.4; letter-spacing: .02em; } .leo-tour__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--leo-accent-soft-color); font-size: .8125rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--leo-neon-strong-color); transition: color .18s ease, border-color .18s ease; animation: leoFade .5s ease-out 1.4s both; } .leo-tour__link:hover { color: var(--leo-heading-color); border-color: var(--leo-accent-color); } .leo-tour__link i { font-size: .75rem; } /* --- Frame 1 — stacked CTA column under the bubble (demo composition) --- */ .leo-tour__actions { display: flex; flex-direction: column; gap: 8px; } /* Demo primary button: full column width, generous height, medium radius, centred bold white label, and the arrow parked near the right edge rather than beside the label. Secondary is the same block with no fill. */ .leo-tour__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: clamp(9px, 1.55vh, 14px) 34px; border: 1px solid transparent; border-radius: 14px; color: var(--leo-heading-color); font-size: 1rem; font-weight: 700; text-align: center; cursor: pointer; transition: box-shadow .18s ease, color .18s ease; } .leo-tour__btn--primary { border-color: var(--leo-cta-edge-color); background: var(--leo-cta-grad); box-shadow: var(--leo-inner-line); } .leo-tour__btn--ghost { border-color: var(--leo-neon-strong-color); background: none; box-shadow: var(--leo-glow); } .leo-tour__btn--primary:hover { box-shadow: var(--leo-cta-glow-hover), var(--leo-inner-line); } .leo-tour__btn--ghost:hover { box-shadow: var(--leo-glow-hover); } .leo-tour__btn i { position: absolute; top: 50%; right: clamp(12px, 2vh, 18px); transform: translateY(-50%); font-size: .8125rem; } .leo-tour__hint { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--leo-text-dim-color); font-size: .8125rem; line-height: 1.45; } .leo-tour__hint i { margin-top: 2px; color: var(--leo-accent-soft-color); font-size: .8125rem; } .leo-tour__hint b { display: block; color: var(--leo-text-color); font-weight: 500; } /* --- Frame 2 — exam badges over the preparation-page rows --- */ .leo-tour__badges { display: flex; flex-wrap: wrap; gap: 4px; } .leo-tour__badge { padding: 3px 7px; border: 1px solid var(--leo-neon-color); border-radius: 7px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); color: var(--leo-text-color); font-size: clamp(.75rem, 1.15vh, .8125rem); line-height: 1.35; letter-spacing: .02em; animation: leoPop .4s ease-out both; animation-delay: calc(var(--leo-i, 0) * 70ms); } /* Frame 1 — the three pillars under the bubble. The strip used to carry these in the head band; as chips they sit with the copy instead of over Leo. */ .leo-tour__badge--icon { display: inline-flex; align-items: center; gap: 6px; } .leo-tour__badge--icon i { color: var(--leo-accent-soft-color); font-size: .75rem; } .leo-tour__badge--more { border-style: dashed; border-color: var(--leo-neon-strong-color); color: var(--leo-accent-soft-color); font-style: italic; } /* Frame 3 carries two panels, a long bubble and a button in one column, so it runs one step tighter than --dense on spacing alone. The type scale is NOT touched here: --leo-scene-font stays on the --dense clamp whose floor is .75rem, which is the readability floor for the whole tour. */ .leo-tour__frame[data-leo-frame="3"] { --leo-panel-pad: clamp(6px, .85vh, 8px); --leo-panel-gap: clamp(4px, .6vh, 6px); --leo-body-gap: clamp(4px, .7vh, 6px); --leo-row-pad: clamp(3px, .5vh, 4px); } /* The button is the frame's closing action, not a full-width door like the ones on frame 12: it shrinks to its own content and centres over the panels. */ .leo-tour__frame[data-leo-frame="3"] .leo-tour__gate { align-self: center; justify-content: center; padding: 7px 16px; font-size: .875rem; } /* --- Frame 3 — two Student Portal miniatures. The topic-questions menu and the compact exam list both sit on the shared .leo-tour__panel surface; the row badge and the action chip are the file's existing .leo-tour__badge / .leo-tour__pick, so the frame adds no new chip language of its own. --- */ .leo-tour__qmenu { display: flex; flex-direction: column; gap: 3px; } .leo-tour__qmenu-row { display: flex; align-items: center; gap: 9px; color: var(--leo-text-color); font-size: var(--leo-scene-font); line-height: 1.25; animation: leoSlide .4s ease-out both; animation-delay: calc(var(--leo-i, 0) * 130ms); } /* a subtopic reads one step in and one step quieter than the topic above it */ .leo-tour__qmenu-row--sub { padding-left: 14px; color: var(--leo-text-dim-color); font-size: .75rem; } .leo-tour__qmenu-row em { margin-left: auto; color: var(--leo-text-dim-color); font-style: normal; font-size: .75rem; font-variant-numeric: tabular-nums; } .leo-tour__elist { display: flex; flex-direction: column; gap: 4px; } .leo-tour__erow { display: flex; align-items: center; gap: 9px; padding: var(--leo-row-pad) 9px; border: 1px solid var(--leo-neon-color); border-radius: 10px; background: var(--leo-surface-color); color: var(--leo-text-color); font-size: var(--leo-scene-font); line-height: 1.25; animation: leoSlide .42s ease-out both; animation-delay: calc(250ms + var(--leo-i, 0) * 150ms); } /* The name takes whatever is left and truncates rather than wrapping the row onto a second line; the badge and the action chip keep their own width. The colour is spelled out because the main theme's own `strong, b` rule (verityprep_main_theme_v2.css) paints every bold element with the PAGE heading ink, which is near-black in light theme: a direct rule on the element beats the row's inherited --leo-text-color whatever the specificity, so the name went black on the dark card. */ .leo-tour__erow b { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--leo-heading-color); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .leo-tour__erow .leo-tour__badge, .leo-tour__erow .leo-tour__pick { flex: 0 0 auto; } /* --- Frame 4 — course, then topic, then level --- */ .leo-tour__tier { display: flex; flex-direction: column; gap: 6px; animation: leoRise .42s ease-out both; animation-delay: calc(var(--leo-i, 0) * 220ms); } .leo-tour__tier-label { color: var(--leo-text-dim-color); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .leo-tour__picks { display: flex; flex-wrap: wrap; gap: 5px; } .leo-tour__pick { padding: 5px 10px; border: 1px solid var(--leo-neon-color); border-radius: 8px; background: var(--leo-surface-color); color: var(--leo-text-dim-color); font-size: .8125rem; } .leo-tour__pick--more { border-style: dashed; color: var(--leo-accent-soft-color); font-style: italic; } .leo-tour__pick--on { border-color: transparent; background: var(--leo-fill-grad); color: var(--leo-heading-color); box-shadow: var(--leo-glow-strong); } .leo-tour__topics { display: flex; flex-direction: column; gap: 5px; } .leo-tour__topic { display: flex; align-items: center; gap: 9px; color: var(--leo-text-color); font-size: var(--leo-scene-font); animation: leoSlide .4s ease-out both; animation-delay: calc(700ms + var(--leo-i, 0) * 130ms); } .leo-tour__topic i { width: 15px; height: 15px; flex: 0 0 auto; position: relative; border-radius: 5px; background: var(--leo-tile-teal-grad); box-shadow: var(--leo-glow); } .leo-tour__topic i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 3px; height: 7px; border-right: 2px solid var(--leo-heading-color); border-bottom: 2px solid var(--leo-heading-color); transform: rotate(42deg); } .leo-tour__topic em { margin-left: auto; color: var(--leo-text-dim-color); font-style: normal; font-size: .75rem; font-variant-numeric: tabular-nums; } .leo-tour__diff { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--leo-neon-color); border-radius: 999px; background: var(--leo-surface-color); align-self: flex-start; } .leo-tour__diff-chip { padding: 4px 12px; border-radius: 999px; color: var(--leo-text-dim-color); font-size: .8125rem; } .leo-tour__diff-chip--on { background: var(--leo-fill-grad); color: var(--leo-heading-color); box-shadow: var(--leo-glow-strong); animation: leoSlideRight .55s ease-out 1.5s both; } .leo-tour__meter { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-top: 9px; border-top: 1px solid var(--leo-neon-color); } .leo-tour__meter-label { color: var(--leo-text-dim-color); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; } .leo-tour__meter small { color: var(--leo-text-dim-color); font-size: .75rem; } .leo-tour__count { color: var(--leo-heading-color); font-size: clamp(15.1px, 2.211vh, 21px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* --- Frame 2 — what the platform offers: icon tile, title, one-line answer. Same glass surface and the same --leo-i stagger as the rows elsewhere. --- */ .leo-tour__offers { display: flex; flex-direction: column; gap: 6px; } .leo-tour__offer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: var(--leo-row-pad) 11px; border: 1px solid var(--leo-neon-color); border-radius: 11px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); box-shadow: var(--leo-glow), var(--leo-inner-line); color: var(--leo-text-color); animation: leoRise .42s ease-out both; animation-delay: calc(var(--leo-i, 0) * 180ms); } .leo-tour__offer i { grid-row: span 2; width: clamp(19px, 2.7vh, 26px); height: clamp(19px, 2.7vh, 26px); display: grid; place-items: center; border-radius: 8px; background: var(--leo-tile-blue-grad); color: var(--leo-heading-color); font-size: .75rem; box-shadow: var(--leo-glow); } .leo-tour__offer--violet i { background: var(--leo-tile-violet-grad); } .leo-tour__offer--teal i { background: var(--leo-tile-teal-grad); } .leo-tour__offer--green i { background: var(--leo-tile-green-grad); } .leo-tour__offer b { color: var(--leo-heading-color); font-size: var(--leo-scene-font); font-weight: 700; line-height: 1.25; } .leo-tour__offer small { color: var(--leo-text-dim-color); font-size: .75rem; line-height: 1.3; } /* --- Frame 9 — the two guidance panels, in the portal's own wording --- */ .leo-tour__guides { display: flex; flex-direction: column; gap: 7px; } .leo-tour__guide { display: flex; flex-direction: column; gap: 4px; padding: var(--leo-row-pad) 11px; border: 1px solid var(--leo-neon-color); border-radius: 12px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); box-shadow: var(--leo-glow), var(--leo-inner-line); animation: leoRise .45s ease-out both; animation-delay: calc(var(--leo-i, 0) * 220ms); } .leo-tour__guide-head { display: flex; align-items: center; gap: 7px; color: var(--leo-heading-color); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .leo-tour__guide-head b { padding: 2px 7px; border-radius: 6px; background: var(--leo-fill-grad); color: var(--leo-heading-color); font-size: .75rem; letter-spacing: .06em; } .leo-tour__guide-row { display: flex; align-items: center; gap: 7px; color: var(--leo-text-color); font-size: var(--leo-scene-font); } .leo-tour__guide-row em { font-style: normal; flex: 1; min-width: 0; } .leo-tour__guide-row small { color: var(--leo-text-dim-color); font-size: .75rem; } .leo-tour__guide-band { min-width: 26px; padding: 2px 7px; border-radius: 6px; background: var(--leo-ok-wash-color); color: var(--leo-ok-color); font-size: .8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .leo-tour__guide-band--warn { background: var(--leo-accent-wash-color); color: var(--leo-accent-soft-color); } .leo-tour__guide-tier { padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; } .leo-tour__guide-tier--good { background: var(--leo-ok-wash-color); color: var(--leo-ok-color); } .leo-tour__guide-tier--focus { background: var(--leo-warn-wash-color); color: var(--leo-warn-color); } .leo-tour__guide-meta { color: var(--leo-text-dim-color); font-size: .75rem; line-height: 1.35; } .leo-tour__guide-next { display: flex; align-items: center; gap: 7px; padding-top: 5px; border-top: 1px solid var(--leo-neon-color); color: var(--leo-accent-soft-color); font-size: .75rem; } .leo-tour__guide-next i { font-size: .75rem; } /* --- Frame 5 — a miniature of the REAL question screen. Light panel on the dark card, laid out from the live interface: top bar, black question number, Mark / Zoom / amber Report pills, dashed rule, maroon-railed question box, maroon letter discs, and the eliminate buttons OUTSIDE the row on its right. Sequence is CSS, gated by --leo-run. --- */ .leo-tour__qb { display: flex; flex-direction: column; gap: clamp(3px, .65vh, 5px); padding: clamp(5px, .9vh, 8px); border: 1px solid var(--leo-qb-line-color); border-radius: 12px; background: var(--leo-qb-page-color); box-shadow: 0 16px 34px var(--leo-shadow-color); color: var(--leo-qb-ink-color); font-size: var(--leo-qb-font); line-height: 1.35; animation: leoPop .45s ease-out both; animation-play-state: var(--leo-run); } .leo-tour__qb-top { display: flex; align-items: center; gap: 5px; animation: leoFade .4s ease-out .15s both; animation-play-state: var(--leo-run); } .leo-tour__qb-back, .leo-tour__qb-timer { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--leo-qb-line-color); border-radius: 999px; background: var(--leo-qb-card-color); color: var(--leo-qb-dim-color); } .leo-tour__qb-timer { font-weight: 700; color: var(--leo-qb-ink-color); font-variant-numeric: tabular-nums; } .leo-tour__qb-title { font-weight: 700; min-width: 0; } .leo-tour__qb-title em { color: var(--leo-qb-dim-color); font-style: normal; font-weight: 400; } .leo-tour__qb-tools { margin-left: auto; display: inline-flex; gap: 6px; color: var(--leo-qb-dim-color); } .leo-tour__qb-head { display: flex; align-items: center; gap: 4px; animation: leoFade .4s ease-out .3s both; animation-play-state: var(--leo-run); } .leo-tour__qb-no { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--leo-qb-black-color); color: var(--leo-qb-card-color); font-weight: 700; } .leo-tour__qb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid var(--leo-qb-line-color); border-radius: 999px; background: var(--leo-qb-card-color); color: var(--leo-qb-dim-color); font-size: .75rem; } .leo-tour__qb-pill--report { border-color: var(--leo-qb-amber-line-color); color: var(--leo-qb-amber-color); } .leo-tour__qb-elim { margin-left: auto; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; /* functional disc */ background: var(--leo-qb-black-color); color: var(--leo-qb-card-color); font-weight: 700; text-decoration: line-through; } .leo-tour__qb-rule { display: block; border-top: 1px dashed var(--leo-qb-line-color); animation: leoFade .4s ease-out .4s both; animation-play-state: var(--leo-run); } .leo-tour__qb-q { margin: 0; display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border: 1px solid var(--leo-qb-line-color); border-left: 3px solid var(--leo-maroon-color); border-radius: 7px; background: var(--leo-qb-card-color); clip-path: inset(0 100% 0 0); animation: leoTypeIn 1s steps(30, end) .55s both; animation-play-state: var(--leo-run); } .leo-tour__qb-q i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 3px; border-radius: 2px; background: var(--leo-maroon-color); } .leo-tour__qb-math { font-family: Georgia, "Times New Roman", serif; font-style: italic; } .leo-tour__qb-choices { display: flex; flex-direction: column; gap: clamp(2px, .55vh, 4px); } .leo-tour__qb-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; animation: leoRise .4s ease-out both; animation-play-state: var(--leo-run); } .leo-tour__qb-line:nth-child(1) { animation-delay: 1.8s; } .leo-tour__qb-line:nth-child(2) { animation-delay: 2.1s; } .leo-tour__qb-line:nth-child(3) { animation-delay: 2.4s; } .leo-tour__qb-line:nth-child(4) { animation-delay: 2.7s; } .leo-tour__qb-choice { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid var(--leo-qb-line-color); border-left: 3px solid var(--leo-maroon-color); border-radius: 7px; background: var(--leo-qb-card-color); } .leo-tour__qb-choice b { flex: 0 0 auto; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; /* functional disc */ background: var(--leo-maroon-color); color: var(--leo-maroon-ink-color); font-size: .75rem; font-weight: 700; } .leo-tour__qb-text { min-width: 0; } /* the eliminate control is its own round button OUTSIDE the row, on its right */ .leo-tour__qb-cross { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--leo-qb-line-color); border-radius: 50%; /* functional disc */ background: var(--leo-qb-card-color); color: var(--leo-qb-dim-color); font-size: .75rem; font-weight: 700; text-decoration: line-through; } .leo-tour__qb-line--out .leo-tour__qb-cross { animation: leoQbCross .4s ease-out both; animation-play-state: var(--leo-run); } .leo-tour__qb-line--out .leo-tour__qb-choice { animation: leoQbOut .4s ease-out both; animation-play-state: var(--leo-run); } .leo-tour__qb-line--out:nth-child(1) .leo-tour__qb-cross { animation-delay: 3.6s; } .leo-tour__qb-line--out:nth-child(1) .leo-tour__qb-choice { animation-delay: 3.7s; } .leo-tour__qb-line--out:nth-child(4) .leo-tour__qb-cross { animation-delay: 4.2s; } .leo-tour__qb-line--out:nth-child(4) .leo-tour__qb-choice { animation-delay: 4.3s; } .leo-tour__qb-line--right .leo-tour__qb-choice { animation: leoRise .4s ease-out 2.4s both, leoQbRight .6s ease-out 5.2s both; animation-play-state: var(--leo-run), var(--leo-run); } .leo-tour__qb-line--right .leo-tour__qb-choice b { animation: leoQbDisc .5s ease-out 5.2s both; animation-play-state: var(--leo-run); } .leo-tour__qb-actions { display: flex; justify-content: center; gap: 5px; } .leo-tour__qb-ask, .leo-tour__qb-save { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--leo-qb-line-color); border-radius: 999px; background: var(--leo-qb-lav-color); color: var(--leo-qb-ink-color); font-weight: 700; } .leo-tour__qb-ask { border-color: var(--leo-qb-amber-line-color); background: var(--leo-qb-amber-wash-color); animation: leoQbAsk 1.1s ease-in-out 6s 3 both; animation-play-state: var(--leo-run); } .leo-tour__qb-ask img { width: 14px; height: 14px; object-fit: contain; } .leo-tour__qb-bottom { display: flex; align-items: center; gap: 6px; } .leo-tour__qb-foot-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--leo-qb-dim-color); } /* The real screen puts a white, bold counter on the black pill. The colour is set on the child, so it cannot inherit the panel's dark ink and disappear into the pill. */ .leo-tour__qb-count { margin-inline: auto; display: flex; flex-direction: column; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--leo-qb-black-color); line-height: 1.2; text-align: center; } .leo-tour__qb-count b { color: var(--leo-qb-card-color); font-size: clamp(.75rem, 1.05vh, .8125rem); font-weight: 700; font-variant-numeric: tabular-nums; } @keyframes leoQbCross { from { background: var(--leo-qb-card-color); color: var(--leo-qb-dim-color); transform: scale(1); } 55% { transform: scale(1.28); } to { background: var(--leo-qb-black-color); color: var(--leo-qb-card-color); transform: scale(1); } } @keyframes leoQbOut { to { opacity: .45; background: var(--leo-qb-dim-fill-color); } } @keyframes leoQbRight { to { border-color: var(--leo-ok-color); background: var(--leo-qb-ok-wash-color); } } @keyframes leoQbDisc { to { background: var(--leo-ok-color); } } @keyframes leoQbAsk { 50% { box-shadow: 0 0 0 3px var(--leo-qb-amber-wash-color); } } /* --- Frame 10 — what the coach actually does --- */ .leo-tour__coach-list { display: flex; flex-direction: column; gap: 6px; } .leo-tour__coach-row { display: flex; align-items: center; gap: 10px; padding: var(--leo-row-pad) 10px; border: 1px solid var(--leo-neon-color); border-radius: 11px; background: var(--leo-surface-color); color: var(--leo-text-color); font-size: var(--leo-scene-font); line-height: 1.35; animation: leoSlide .42s ease-out both; animation-delay: calc(var(--leo-i, 0) * 200ms); } .leo-tour__coach-row i { flex: 0 0 auto; width: clamp(16px, 2.3vh, 22px); height: clamp(16px, 2.3vh, 22px); display: grid; place-items: center; border-radius: 7px; background: var(--leo-tile-blue-grad); color: var(--leo-heading-color); font-size: .75rem; box-shadow: var(--leo-glow); } .leo-tour__coach-row--on { border-color: transparent; background: var(--leo-fill-grad); color: var(--leo-heading-color); box-shadow: var(--leo-glow-strong), var(--leo-inner-line); } .leo-tour__coach-row--on i { background: var(--leo-on-fill-wash-color); box-shadow: none; } /* --- Frame 7 — exam runtime miniature --- */ .leo-tour__exam-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--leo-neon-color); } .leo-tour__exam-title { color: var(--leo-heading-color); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .leo-tour__modules { display: flex; flex-direction: column; gap: 5px; } .leo-tour__module { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--leo-row-pad) 10px; border: 1px solid var(--leo-neon-color); border-radius: 9px; background: var(--leo-surface-color); font-size: var(--leo-scene-font); animation: leoSlide .4s ease-out both; animation-delay: calc(var(--leo-i, 0) * 150ms); } .leo-tour__module em { color: var(--leo-text-dim-color); font-style: normal; font-variant-numeric: tabular-nums; } .leo-tour__tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--leo-neon-color); } .leo-tour__tool { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--leo-neon-color); border-radius: 8px; color: var(--leo-text-dim-color); font-size: .75rem; } .leo-tour__tool i { color: var(--leo-accent-soft-color); font-size: .75rem; } /* --- Frame 8 — post-exam report, Banner 7 layout --- */ .leo-tour__score { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--leo-neon-color); } .leo-tour__score-note { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .leo-tour__score-label { color: var(--leo-text-dim-color); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; } .leo-tour__delta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--leo-ok-wash-color); color: var(--leo-ok-color); font-size: .8125rem; font-weight: 600; animation: leoDrop .5s cubic-bezier(.2, .9, .3, 1.3) 1.2s both; } .leo-tour__delta i { font-size: .75rem; } .leo-tour__rcards { display: flex; flex-direction: column; gap: 7px; } .leo-tour__rcard { display: flex; flex-direction: column; gap: 3px; padding: var(--leo-row-pad) 11px; border: 1px solid var(--leo-neon-color); border-left-width: 3px; border-radius: 11px; background: var(--leo-surface-color); box-shadow: var(--leo-glow); animation: leoRise .42s ease-out both; animation-delay: calc(var(--leo-i, 0) * 200ms); } .leo-tour__rcard b { color: var(--leo-heading-color); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .leo-tour__rcard--good { border-left-color: var(--leo-ok-color); } .leo-tour__rcard--bad { border-left-color: var(--leo-bad-color); } .leo-tour__rcard--next { border-left-color: var(--leo-warn-color); } .leo-tour__rrow { display: flex; align-items: center; gap: 8px; color: var(--leo-text-color); font-size: .8125rem; } .leo-tour__rrow i { flex: 0 0 auto; font-size: .75rem; } .leo-tour__rcard--good .leo-tour__rrow i { color: var(--leo-ok-color); } .leo-tour__rcard--bad .leo-tour__rrow i { color: var(--leo-bad-color); } .leo-tour__rcard--next .leo-tour__rrow i { color: var(--leo-warn-color); } .leo-tour__share { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--leo-neon-color); color: var(--leo-text-dim-color); font-size: .75rem; } .leo-tour__share i { color: var(--leo-accent-soft-color); } /* --- Frame 6 — course books from four different exams --- */ .leo-tour__books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .leo-tour__book-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: clamp(32px, 5.3vh, 50px); padding: 7px 9px 7px 15px; border-radius: 10px; background: var(--leo-tile-blue-grad); color: var(--leo-heading-color); box-shadow: var(--leo-glow-strong), var(--leo-inner-line); animation: leoPop .45s ease-out both; animation-delay: calc(var(--leo-i, 0) * 150ms); } .leo-tour__book-card--teal { background: var(--leo-tile-teal-grad); } .leo-tour__book-card--violet { background: var(--leo-tile-violet-grad); } .leo-tour__book-card--green { background: var(--leo-tile-green-grad); } .leo-tour__book-spine { position: absolute; left: 6px; top: 7px; bottom: 7px; width: 3px; border-radius: 999px; background: var(--leo-spine-color); } /* Same story as .leo-tour__erow b: the theme's `strong, b` rule paints this title with the page heading ink instead of letting the card's own colour through, so the book name went black on its bright tile. */ .leo-tour__book-card b { color: var(--leo-heading-color); font-size: .8125rem; font-weight: 700; line-height: 1.25; } .leo-tour__book-card small { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .leo-tour__book-page { display: flex; flex-direction: column; gap: 5px; } .leo-tour__book-q { display: flex; align-items: center; gap: 8px; padding: var(--leo-row-pad) 9px; border: 1px solid var(--leo-neon-color); border-radius: 9px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); color: var(--leo-text-color); font-size: var(--leo-scene-font); } .leo-tour__book-q i { width: 15px; height: 15px; flex: 0 0 auto; position: relative; border-radius: 5px; background: var(--leo-tile-green-grad); box-shadow: var(--leo-glow); animation: leoDrop .45s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(600ms + var(--leo-i, 0) * 420ms); } .leo-tour__book-q i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 3px; height: 7px; border-right: 2px solid var(--leo-heading-color); border-bottom: 2px solid var(--leo-heading-color); transform: rotate(42deg); } /* --- Frame 10 — KPIs, projection ring, next topics --- */ .leo-tour__project { display: flex; align-items: center; gap: 12px; } /* Frame 10 only: the ring sat flush against the panel wall and its strong glow read as half of it hanging outside. Boxing it together with the priority rows gives it a container of its own. .leo-tour__project is used on no other frame, and the ring override below is scoped the same way, so the rings on frames 3 and 8 keep the default glow. */ .leo-tour__frame[data-leo-frame="10"] .leo-tour__project { padding: var(--leo-row-pad) 10px; border: 1px solid var(--leo-neon-color); border-radius: 11px; background: var(--leo-surface-color); } .leo-tour__frame[data-leo-frame="10"] .leo-tour__ring { box-shadow: var(--leo-glow); } .leo-tour__ring { --leo-ring-size: clamp(44px, 8.2vh, 78px); position: relative; width: var(--leo-ring-size); height: var(--leo-ring-size); flex: 0 0 auto; border-radius: 50%; /* functional ring */ display: grid; place-items: center; background: conic-gradient(var(--leo-accent-color) var(--leo-ring), var(--leo-track-color) 0), var(--leo-surface-color); box-shadow: var(--leo-glow-strong); animation: leoRingFill 1.1s ease-out both; } .leo-tour__ring--sm { --leo-ring-size: clamp(38px, 6.5vh, 62px); } /* Row-sized ring for frame 3's exam list: too small to hold a label, so it carries the percentage by fill alone and drops to the quieter glow. */ .leo-tour__ring--xs { --leo-ring-size: clamp(24px, 3.6vh, 30px); box-shadow: var(--leo-glow); } .leo-tour__ring--xs::before { inset: 4px; } .leo-tour__ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; /* functional ring core */ background: var(--leo-bg-color); } .leo-tour__ring-label { position: relative; color: var(--leo-text-dim-color); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; } /* The label can carry a score instead of a word: the mark reads bright and large. Letter spacing is a word treatment, so the digits drop it. The ring carries the MARK only - the scale lives in the sentence under it (R16), because the 36px ring's 28px core wrapped "8" and "/10" onto two lines and the type touched the rim. */ .leo-tour__ring-label b { color: var(--leo-heading-color); font-size: 1.125rem; font-weight: 700; letter-spacing: normal; font-variant-numeric: tabular-nums; } .leo-tour__ring .leo-tour__count { position: relative; font-size: clamp(.75rem, 1.684vh, 1rem); } .leo-tour__priorities { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; } .leo-tour__priority { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--leo-text-color); animation: leoSlide .4s ease-out both; animation-delay: calc(700ms + var(--leo-i, 0) * 140ms); } .leo-tour__priority b { width: clamp(14px, 2vh, 19px); height: clamp(14px, 2vh, 19px); flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; background: var(--leo-surface-strong-color); color: var(--leo-accent-soft-color); font-size: .75rem; font-weight: 700; } .leo-tour__coach { margin: 0; padding: 8px 11px; border-left: 2px solid var(--leo-accent-color); background: var(--leo-surface-strong-color); color: var(--leo-text-color); font-size: .8125rem; animation: leoRise .45s ease-out 1.3s both; } /* --- Frame 11 — where students ended up. Numbers are real (ogrenciUniversite, 11.09.2026); school names are word-marks, never remote logo images. --- */ .leo-tour__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .leo-tour__stat { padding: 8px 9px; border: 1px solid var(--leo-neon-color); border-radius: 12px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); box-shadow: var(--leo-glow), var(--leo-inner-line); text-align: center; animation: leoPop .45s ease-out both; animation-delay: calc(var(--leo-i, 0) * 160ms); } .leo-tour__stat .leo-tour__count { display: block; font-size: clamp(13px, 1.895vh, 18px); } .leo-tour__stat small { display: block; color: var(--leo-text-dim-color); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; } .leo-tour__schools { display: flex; flex-wrap: wrap; gap: 5px; } .leo-tour__school { padding: 5px 9px; border: 1px solid var(--leo-neon-color); border-radius: 7px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); color: var(--leo-text-color); font-size: .8125rem; line-height: 1.25; letter-spacing: .01em; animation: leoPop .4s ease-out both; animation-delay: calc(var(--leo-i, 0) * 100ms); } .leo-tour__school--more { border-style: dashed; border-color: var(--leo-neon-strong-color); color: var(--leo-accent-soft-color); font-style: italic; } /* --- Frame 12 — three doors --- */ .leo-tour__gates { display: flex; flex-direction: column; gap: 7px; } .leo-tour__gate { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--leo-neon-strong-color); border-radius: 12px; background: var(--leo-glass-panel-bg); backdrop-filter: var(--leo-glass-blur); box-shadow: var(--leo-glow); color: var(--leo-text-color); font-size: 1rem; font-weight: 600; text-decoration: none; transition: box-shadow .18s ease, color .18s ease; animation: leoPop .45s ease-out both; animation-delay: calc(var(--leo-i, 0) * 150ms); } .leo-tour__gate i { color: var(--leo-accent-soft-color); font-size: .875rem; } .leo-tour__gate:hover { color: var(--leo-heading-color); box-shadow: var(--leo-glow-hover); } .leo-tour__gate--primary { border-color: var(--leo-cta-edge-color); border-radius: 14px; background: var(--leo-cta-grad); color: var(--leo-heading-color); box-shadow: var(--leo-inner-line); } .leo-tour__gate--primary:hover { box-shadow: var(--leo-cta-glow-hover), var(--leo-inner-line); } .leo-tour__gate--primary i { color: var(--leo-heading-color); } /* --- Navigation: sits ABOVE Leo in the stacking order (z-index 4) --- */ .leo-tour__nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 11px; padding: clamp(5px, 1.1vh, 12px) var(--leo-pad-x) clamp(4px, .95vh, 10px); background: var(--leo-nav-scrim); } .leo-tour__nav-btn { width: clamp(22px, 3.3vh, 32px); height: clamp(22px, 3.3vh, 32px); flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--leo-neon-strong-color); border-radius: 50%; /* functional round control */ background: var(--leo-surface-strong-color); box-shadow: var(--leo-glow); color: var(--leo-text-color); font-size: .875rem; cursor: pointer; transition: box-shadow .18s ease, color .18s ease; } /* :not(:disabled) sart: Chrome :hover'i devre disi butonda da eslestirir, o yuzden sarti olmadan olu ok da hover'da parliyordu. */ .leo-tour__nav-btn:hover:not(:disabled) { color: var(--leo-heading-color); box-shadow: var(--leo-glow-hover); } /* Tur 12. karede duruyor, basa sarmiyor: JS uclarda oku disabled yapiyor (1. karede geri, 12. karede ileri). Sonuk hal - isima tamamen kalkar, kenar ve zemin bir kademe zayif tokena duser, imlec artik tiklanabilirlik vaat etmez. Odak halkasi icin ayri bir kural yok ve gerekmiyor: devre disi buton zaten odaklanamaz. */ .leo-tour__nav-btn:disabled { border-color: var(--leo-neon-color); background: var(--leo-surface-color); box-shadow: none; color: var(--leo-text-dim-color); opacity: .5; cursor: default; } .leo-tour__counter { flex: 0 0 auto; color: var(--leo-text-color); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; } .leo-tour__progress { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; } .leo-tour__dot { flex: 1 1 auto; height: 4px; min-width: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--leo-track-color); cursor: pointer; transition: background .2s ease, height .2s ease, box-shadow .2s ease; } /* Steps already passed read bright, the ones ahead stay dim (demo strip). :has(~ [aria-current]) is the only way to reach earlier siblings, and it needs no extra JS hook beyond the aria-current the contract already sets. */ .leo-tour__dot:has(~ [aria-current]) { background: var(--leo-accent-color); } .leo-tour__dot:hover { background: var(--leo-accent-soft-color); } .leo-tour__dot[aria-current] { height: 6px; background: var(--leo-accent-color); box-shadow: 0 0 12px var(--leo-dot-glow-color); } /* --- Auto-advance dwell bar: one element for the whole card, pinned to its bottom edge and clipped by the card's own radius. Hidden until JS puts .is-autoplay on the root; JS also feeds --leo-dwell-ms (that frame's dwell) and --leo-dwell-run (running / paused on hover, focus, blur). --- */ .leo-tour__dwellbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 3px; background: var(--leo-cta-grad); box-shadow: 0 0 10px var(--leo-dot-glow-color); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; } .leo-tour.is-autoplay .leo-tour__dwellbar { opacity: 1; animation: leoDwell var(--leo-dwell-ms, 7000ms) linear both; animation-play-state: var(--leo-dwell-run, paused); } .leo-tour__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Hero split: tour card left, existing copy right --- Scoped to .vp-hero--tour: home.css'teki .vp-hero taban kurallari MainTR anasayfasi tarafindan da kullaniliyor, orasi bu turda etkilenmiyor. */ .vp-hero--tour { grid-template-columns: 1fr 1fr; } .vp-hero--tour .vp-hero__content { padding: 72px 0 72px 44px; } /* Kaynak sirasi h1-once olsun diye vp-hero__content markup'ta basta duruyor; masaustunde sahne yine sol kolonda gorunsun diye order ile one aliniyor. */ .vp-hero--tour .leo-tour { order: -1; align-self: center; } /* Both figure keyframes spell out their 100% block. Everywhere else in this file the `to` end is left implicit (leoFade, leoRise, leoPop, ... all do), which resolves to the element's own value - and for the FIGURE that turned out to be a trap: the figure is the one element whose final opacity a media query wants to change, and an implicit keyframe made the outcome depend on how the engine reads the underlying value. Measured live: the figure landed at opacity 0. Spelled out, the entrance ends at exactly 1 / translateY(0) and nothing else can drift. Mobile dimming therefore does NOT go through opacity at all - it goes through the filter chain, see the mobile query. The flip variant is frame 6 only (mirrored); both of its ends carry the same two transform functions so the entrance interpolates componentwise instead of falling back to matrix interpolation. */ @keyframes leoFigIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes leoFigInFlip { from { opacity: 0; transform: translateY(26px) rotateY(180deg); } to { opacity: 1; transform: translateY(0) rotateY(180deg); } } @keyframes leoFade { from { opacity: 0; } } @keyframes leoRise { from { opacity: 0; transform: translateY(10px); } } @keyframes leoSlide { from { opacity: 0; transform: translateX(-12px); } } @keyframes leoSlideRight { from { opacity: 0; transform: translateX(-18px); } } @keyframes leoPop { from { opacity: 0; transform: scale(.94); } } @keyframes leoTypeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2px 0 0); } } @keyframes leoDrop { from { opacity: 0; transform: translateY(-12px) scale(.7); } } @keyframes leoBarFill { from { width: 0; } } @keyframes leoRingFill { from { --leo-ring: 0%; } } @keyframes leoDwell { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* xl ve üzeri (>= 1200px) — dosyadaki tek min-width sorgusu. Digerlerinin hepsi max-width tabanli, bu yuzden hicbiriyle ayni anda calismiyor. 1. karede figur sol kenardan yalnizca -4% tasar ve en genis noktasi basligin hemen altina denk gelir; alt cumle bu genislikten itibaren soldan iceri alinip Leo'nun ustunden cekiliyor. Yalniz 1. kare: diger 11 karenin alt cumlesi ortada kalir. */ @media (min-width: 1200px) { .leo-tour__frame[data-leo-frame="1"] .leo-tour__sub { margin-left: 5rem; } } /* Tablet ve altı (< lg = 992px) — kopya üstte, kart altta */ @media (max-width: 991.98px) { /* home.css'teki @media .vp-hero { grid-template-columns: 1fr } bu dosyadaki media disi .vp-hero--tour kuralindan once geldigi icin tekrar yaziliyor. */ .vp-hero--tour { grid-template-columns: 1fr; } /* Tek kolonda kaynak sirasi zaten dogru: icerik ustte, kart altta. */ .vp-hero--tour .leo-tour { order: 0; } /* Tek kolona dusunce kart, container'in tamamini kapliyor (768-991 arasi 720px): masaustundeki 480-660px'lik karttan DAHA GENIS. Bu yuzden burada tipografiye dokunulmuyor, sadece kolon orani ve figur boyu ayarlaniyor. Kart ~696px, ic genislik ~664px; kolon %70 -> %68, yani ~452px. Figurun zoom'u .95 iken gorunen genisligi ~273px idi ve kolonla ~60px cakisiyordu; .85'te ~234px'e inip cakisma silueti sinirina (~22px) dusuyor. */ /* R14 — YUKSEKLIK. Burada `height: auto; min-height: 720px` vardi ve min-height hesaplanan yuksekligi eziyordu: 880px'lik kart ~667px'lik bir telefon ekranina sigmiyor, turu izlemek icin sayfayi kaydirmak gerekiyordu. Kareler `position: absolute` oldugu icin kartin dogal yuksekligi YOKTUR - acik bir yukseklik vermek zorunlu, `auto` birakilirsa kart 0px olur. O yuzden min-height'lar kaldirildi ve kart, masaustundeki gibi ekrana gore olculuyor: ekranin %90'i, en cok 760px, en az 520px. dvh, cunku mobil tarayici cubugu toplanirken vh yalan soyluyor. 375x667 -> 600 390x844 -> 760 768x1024 -> 760 yatay 375 -> 520 */ .leo-tour { --leo-fig-zoom: .85; --leo-body-w: 68%; height: max(520px, min(90dvh, 760px)); margin: 0 0 36px; } .leo-tour__frame[data-leo-frame] { --leo-body-w: 68%; } } /* Mobile (< md = 768px) R13: burada kolon %100 idi, yani metin Leo'nun uzerini bastan sona ortuyordu ve yigin sirasi (balon > Leo > bloklar) yuzunden Leo gorunmez oluyordu. Cozum kolonu genisletmek degil, masaustu oranini korumak ve YAZIYI kucultmek: 576-767 bandinda kart sabit ~516px (container sm), ic genislik ~488px, kolon %62 -> ~303px. Masaustunde 1366px'te kolon ~294px oldugu icin bu, kartin zaten calistigi genislik. Figur .70 -> .62: boyu ~343px, genisligi ~257px, -14% tasma ile gorunen ~185px; 303 + 185 = 488, yani kolon ile figur tam olarak alana sigiyor. Tipografi tabanlari rem oldugu icin dar ekranda kendiliginden kuculmuyordu (clamp'lerin degisken ucu vh, yani yukseklige bagli), o yuzden mobilde sabit ve daha kucuk degerler veriliyor. MASAUSTU DEGERLERI DEGISMIYOR. */ @media (max-width: 767.98px) { .leo-tour { /* R21: figur yine yukseklik uzerinden olcekleniyor, zoom geri geldi. .85, kullanicinin "guzeldi" dedigi R17/R18 hali; ayrica figurun kendi kafasini avatarin altinda tutuyor (sahne 578px iken figur 458px, kafa tepesi sahnenin ~154px'inde, avatar ise 3-55px arasinda). */ --leo-fig-zoom: .85; /* R17 - R13'TEKI KARARIN GERI ALINMASI. Burada %62 vardi: telefonda 219px'lik bir kolonda her cumle sariyor, icerik iki katina cikiyor ve on kare birden tasiyordu; kalan %39 ise Leo yalnizca %7-%17 gorundugu icin bostu. Canli olcum (383x560, kart 359x520): %62'de 10 kare tasiyor, en kotusu +118; %100'de 2 kare kaliyor, en kotusu +27. Telefonda yan yana duzen calismiyor, tam genislik dogru olan. MASAUSTU %65 (1. kare %50, 3. kare %65) ve TABLET %68 degismedi - orada olcum temiz. */ --leo-body-w: 100%; /* R14: alt bosluk 40 -> 34. Alt bosluk gezinme seridini ortmek zorunda; serit, oklar mobilde gizlendigi icin ~52px'ten ~31px'e indi, 34px onu hala temizliyor. UST bosluga dokunulmadi: oradaki clamp kisa bir telefonda zaten ~34.7px ve basligi tepedeki 30px'lik amblemin altindan cikaran tek sey o. */ --leo-pad-bottom: 34px; border-radius: 20px; } /* Oklar mobilde gizli: parmakla kaydirma, nokta seridi ve otomatik akis zaten gezinmeyi tasiyor. Erisilebilirlik notu raporda. */ .leo-tour__nav-btn { display: none; } /* Halkalar yukseklige bagli clamp'lerle buyuyor (8.2vh, bir telefonda ~55px); mobilde kendi taban degerlerinde sabitleniyorlar. Uc kural da burada: ayni ozgullukte olduklari icin sonuncu kazanir, bu yuzden sira taban -> sm -> xs. */ .leo-tour__ring { --leo-ring-size: 44px; } .leo-tour__ring--sm { --leo-ring-size: 38px; } .leo-tour__ring--xs { --leo-ring-size: 24px; } /* Tip ve ritim tokenlari kareye yaziliyor: --dense / --airy ve 3. ile 6. karenin kendi bildirimleri .leo-tour uzerindeki degeri ezerdi. Ayni ozgullukte ama dosyada daha sonra geldigi icin bu blok kazanir; mobilde butun kareler tek bir kompakt ritim kullanir. */ .leo-tour__frame[data-leo-frame] { --leo-body-w: 100%; /* Balon karttaki en kucuk yazi olmaz ve mobilde 14px'te KALIR: satirlar 11px'e indigi icin hiyerarsi rahatca korunuyor (dosyanin sonundaki mobil tipografi blogu). */ --leo-bubble-font: .875rem; --leo-bubble-head-font: .9375rem; --leo-sub-font: .8125rem; --leo-scene-font: .75rem; --leo-qb-font: .75rem; /* R14: kart ekrana sigdirildigi icin ritim bir adim daha kisildi (7/5/5/4 -> 6/4/4/3). Tipografiye dokunulmadi: 0.75rem taban ve 0.875rem balon yerinde. */ --leo-panel-pad: 6px; --leo-panel-gap: 4px; --leo-body-gap: 4px; --leo-row-pad: 3px; } /* R21 - MOBILDE IKISI BIRDEN: arkada soluk buyuk figur, onde balonun kuyrugunun isaret ettigi yuvarlak bas. Roller R21'de TAKAS EDILDI ve sebebi kullanicinin "tum content'i mobilde ortala" istegi: avatar uzerinde kaldigi surece sahneye gore konumlaniyordu, yani sahne `center`a donunce gövde dikeyde kayar ve avatar balondan kopardi. Artik avatar BALONUN sozde elemani (asagida), dolayisiyla balon nereye giderse onunla gidiyor ve sahnenin hizalamasi ikisinin iliskisini hic etkilemiyor. ise R18'deki arka plan figurune geri dondu. R19'un `align-items: flex-start` kurali bu yuzden KALDIRILDI - taban `center` geri geldi (kullanici istegi). */ /* Arka plan figuru: taban kuraldaki bottom / height / object-fit: contain / object-position: bottom center oldugu gibi calisir, sadece yigin seviyesi ve soldurma degisiyor. z-index 0 -> content bloklarinin (1) ve avatarin (balon, 3) altinda. Soldurma `opacity` ile YAPILAMAZ: figur dolgu yapan bir animasyon tasiyor (leoFigIn, fill-mode: both) ve animasyon kaskadda normal bildirimi yener - R17'de tam bu yuzden figur 0'da kalmisti. `filter` animasyonlanmadigi icin catisma yok; zincirdeki iki drop-shadow'u tekrar yazmak zorunlu, cunku filter tek bir ozellik ve bu bildirim tabandakini butunuyle degistirir. Deger .62: kullanicinin gorup "saydam hali guzeldi" dedigi hal bu. R17'deki .38 hic render EDILMEDI (yukarida anlatilan animasyon kaskadi hatasi yuzunden figur sifirda kaliyordu), yani kiyas noktasi degil. */ .leo-tour__leo { z-index: 0; filter: drop-shadow(0 0 36px var(--leo-halo-color)) drop-shadow(0 16px 30px var(--leo-shadow-color)) opacity(.62); } /* --- Avatar: balonun sozde elemani, kuyrugun isaret ettigi yerde --- Dikey hiza layout'tan BAGIMSIZ: kuyruk (::after) top 22px + 15px, yani merkezi 29.5px; 52px'lik disk top 3px'te merkezini 29px'e koyuyor. Aradaki 0.5px sabit, cunku ikisi de ayni kutuya (balona) gore konumlaniyor. Balonun margin-left/right: 60px boslugu R19'dan kaliyor, disk ona oturuyor. ⚠ ::after KUYRUK, ona dokunulmuyor. */ .leo-tour__bubble::before { content: ""; position: absolute; top: 3px; width: 52px; height: 52px; border-radius: 50%; /* functional avatar disc */ border: 1px solid var(--leo-neon-strong-color); box-shadow: var(--leo-glow); background-image: var(--leo-head); background-repeat: no-repeat; } .leo-tour__frame--left .leo-tour__bubble::before { left: -60px; } .leo-tour__frame--right .leo-tour__bubble::before { right: -60px; } /* --- GERCEK KAFA KIRPIMI, arka plan olcekleriyle --- Arka planda yakinlastirma serbest, yani object-view-box'a gerek yok ve kirpim Firefox'ta da dogru calisir. Degerler olculdu, tahmin degil: yedi gorselin alfa kanali satir satir profillenip kafa kutusu cikarildi. Her pozda ayni yapi: siluet ~%1'de basliyor, ~%18-27'de yaymanin en genisi, ~%29-34'te BOYUN olarak daraliyor, sonra omuzlarla aciliyor. Hesap (arka plan alani 50px: width 52 + 1px kenar, Bootstrap border-box): pencere_yuksekligi = kafa_yuksekligi / 0.82 (kafa diskin %82'si) background-size% = kaynak_genisligi / pencere_yuksekligi x 100 background-position X% = (cx x render_genisligi - 25) / (render_genisligi - 50) x 100 Dogrulandi: her pencerenin yatay merkezi kafanin olculen merkezine %0.1 icinde oturuyor, kafa kutusu her seferinde pencerenin ICINDE kaliyor (yani yayma kirpilmiyor) ve kafa diskin yuksekliginin %81.8-82.2'sini kapliyor. Dikeyde 0%: pencerenin tepesi gorselin tepesi, cunku yayma zaten gorselin ust kenarina dayali - altta boyun/omuz paryi kaliyor. Yeni bir kare eklenirse kendi kirpim kuralina da ihtiyaci olur. */ /* Banner Leo + Leo_6 (1024x1536) - kafa y %1-30, x %26-74, cx %50 */ .leo-tour__frame[data-leo-frame="1"] .leo-tour__bubble::before, .leo-tour__frame[data-leo-frame="12"] .leo-tour__bubble::before { background-size: 189%; background-position: 50% 0%; } /* Leo_3 - kafa y %0.25-31, x %34-80, cx %57 (merkezden saga kacik) */ .leo-tour__frame[data-leo-frame="2"] .leo-tour__bubble::before, .leo-tour__frame[data-leo-frame="10"] .leo-tour__bubble::before { background-size: 200%; background-position: 64% 0%; } /* Leo_7 - kafa y %0.75-31, x %20-66, cx %43 (merkezden sola kacik) */ .leo-tour__frame[data-leo-frame="3"] .leo-tour__bubble::before, .leo-tour__frame[data-leo-frame="7"] .leo-tour__bubble::before, .leo-tour__frame[data-leo-frame="11"] .leo-tour__bubble::before { background-size: 203%; background-position: 36% 0%; } /* Leo_5 - kafa y %0.5-34, x %30-78, cx %54; boyun en derinde, pencere en buyuk */ .leo-tour__frame[data-leo-frame="4"] .leo-tour__bubble::before, .leo-tour__frame[data-leo-frame="8"] .leo-tour__bubble::before { background-size: 184%; background-position: 59% 0%; } /* Leo_4 - kafa y %0.25-32, x %23-70, cx %46.5 */ .leo-tour__frame[data-leo-frame="5"] .leo-tour__bubble::before, .leo-tour__frame[data-leo-frame="6"] .leo-tour__bubble::before { background-size: 194%; background-position: 43% 0%; } /* Leo_2 - kafa y %0.5-30, x %28-71, cx %49.5 */ .leo-tour__frame[data-leo-frame="9"] .leo-tour__bubble::before { background-size: 209%; background-position: 49% 0%; } .leo-tour__frame--left .leo-tour__bubble { margin-left: 60px; } .leo-tour__frame--right .leo-tour__bubble { margin-right: 60px; } .leo-tour__note { display: none; } .leo-tour__emblem { height: 30px; } /* R18: olculdu, kose yazilari basligin UZERINE biniyordu (kutular [27,118,93,163] ve [169,118,235,149], h2 [56,145,285,161]). Iki cozum vardi: bandi onlarin altindan baslatmak ya da yazilari gizlemek. Gizlemek secildi cunku bandi asagi almak ~30px sahne yuksekligi yer ve 7. ile 10. kare o 30px'i veremez; ayrica bunlar dekoratif mobilya (aria-hidden) ve dosya ayni sey icin `.leo-tour__note`u da mobilde zaten gizliyor. Kuraldaki max-width/font-size/letter-spacing bilerek yerinde birakildi: R11'de kullanicinin kendi kararlari, silmiyorum. */ .leo-tour__corner { max-width: 66px; font-size: 8px; letter-spacing: .16em; display: none; } .leo-tour__strip { flex-direction: column; border-radius: 16px; } .leo-tour__strip-cell + .leo-tour__strip-cell { border-left: 0; border-top: 1px solid var(--leo-neon-color); } /* Serit mobilde dikey yiginlastigi icin 7. ve 10. karenin baslik bandinin en buyuk blogu o: hucre dolgusu kisiliyor, kazanc dogrudan sahneye gidiyor (3 hucre x ~6px). */ .leo-tour__strip-cell { padding: 4px 10px; } .leo-tour__coach { padding: 5px 9px; } /* R18 - YATAY KAYMANIN KOK SEBEBI. Olculdu: 279px'lik bir viewport'ta (kart 238px) 3. karenin EXAMS paneli 295px `min-content` genisligi dayatiyor, gövdeyi 288px'e itiyor ve sayfada yatay kaydirma aciyor. Sebep satirin sert tabani: halka + ad + rozet + buton yan yana ve rozetle butonun `flex: 0 0 auto`su onlarin kucuLmesine izin vermiyor, yani satirin min-content'i hepsinin TOPLAMI oluyor. Cozum sarma: `flex-wrap` ile bir flex satirinin min-content'i toplam degil EN GENIS TEK OGE olur (~"Continue" butonu, ~70px). Icerik silmek ya da metin kisaltmak gerekmedi; dar telefonda rozet ve buton alt satira gecer, 388px'lik bir kartta satir zaten tek satira sigdigi icin (halka+ad+rozet+buton ~253px) hicbir sey degismez. */ .leo-tour__erow { flex-wrap: wrap; } } /* Küçük mobil (< sm = 576px) R17: bu blokta kolon icin %66, figur icin zoom .46 ve 2-11. karelere --leo-fig-edge: -26% vardi. Ucu de ayni amaca hizmet ediyordu: daralan kolonun yaninda Leo'ya yer acmak. Kolon %100'e dondugu ve Leo fona indigi icin ucu de anlamsizlasti ve kaldirildi - yukaridaki mobil blok (kolon %100, zoom .85) bu genislikte de gecerli, figur kendi karesinin --leo-fig-edge degerini (2-11 icin -14%, 1 ve 12 icin -6%) kullaniyor. Geriye yalnizca gercekten genislige bagli olan tek kolona dusme kurallari kaliyor. */ @media (max-width: 575.98px) { .leo-tour__stats { grid-template-columns: 1fr; } .leo-tour__books { grid-template-columns: 1fr; } .leo-tour__project { flex-direction: column; align-items: flex-start; } } /* --- KISA VIEWPORT, 1. KADEME (yukseklik <= 800px) --- GENISLIKTEN BAGIMSIZ. Yukaridaki butun sorgular genislige bakar; bu ikisi yukseklige bakar, cunku sorun genislikte degil: kart `100dvh - 118px` ile olculuyor, 710px'lik bir viewport'ta 592px'e dusuyor, ama R6'da tipografi rem tabanli clamp'lere cevrildigi icin ICERIK kisa ekranda kuculmuyor. 1707x710'da olculen tasma (gövdenin basliga/nav seridine binmesi) en kotu karede 38px idi. Esik nasil secildi: 710px'te en kotu kare (8) sahneyi ~58px asiyor, yani ~650px'lik bir karta sigiyor; kart = viewport - 118 oldugundan tasma ~768px'lik viewport'ta biter. 800px, o sinirin hemen ustundeki yuvarlak deger. Kullanicinin memnun oldugu 15 inc ve ustu ekranlar (viewport ~950, kart ~807) bu sorgunun DISINDA kalir, tek bir degerleri degismez. Once bosluk kisiliyor; tipografiye 2. kademeye kadar dokunulmuyor. Mobil genislik sorgulariyla cakisma (ucu de ayni secicide bulusuyor, .leo-tour__frame[data-leo-frame], yani kazanan dosyada en sonra gelen): BOSLUK icin bu iki kademe mobil blogun ustune biner ve daha sikisini dayatir - istenen sey de bu. TIPOGRAFI icin dosyanin en sonundaki mobil blok bu kademeleri ezer, cunku telefonda 12px tabani baglayici degil ama genis-kisa masaustunde baglayici. R17. */ @media (max-height: 800px) { .leo-tour__frame[data-leo-frame] { --leo-panel-pad: 6px; --leo-panel-gap: 4px; --leo-body-gap: 4px; --leo-row-pad: 3px; } /* Dikey yiginlarin kendi bosluklari. Hepsi 5-7px idi; kisa ekranda tek bir daha siki ritme iniyorlar. */ .leo-tour__rcards, .leo-tour__guides, .leo-tour__offers, .leo-tour__coach-list, .leo-tour__modules, .leo-tour__topics, .leo-tour__tier, .leo-tour__picks, .leo-tour__books, .leo-tour__stats, .leo-tour__gates { gap: 4px; } /* Bolum ayiraclari: cizginin iki yanindaki nefes payi. */ .leo-tour__exam-head, .leo-tour__score { padding-bottom: 5px; } .leo-tour__meter, .leo-tour__share, .leo-tour__tools { padding-top: 5px; } /* Halkalar yukseklige bagli clamp'lerle olculuyor ama kisa ekranda vh terimi dustugu icin tabanlarinda takiliyorlar; burada tabanin da altina inmek yerine sabit ve daha kucuk bir olcu veriliyor. Sira taban -> sm -> xs: ucu de ayni ozgullukte, sonuncu kazanir. */ .leo-tour__ring { --leo-ring-size: 40px; } .leo-tour__ring--sm { --leo-ring-size: 36px; } .leo-tour__ring--xs { --leo-ring-size: 24px; } /* 5. karenin minyaturu kendi olculerini tasiyor, tokenlardan beslenmiyor. */ .leo-tour__qb { gap: 3px; padding: 5px; } .leo-tour__qb-choices { gap: 2px; } } /* --- KISA VIEWPORT, 2. KADEME (yukseklik <= 760px) --- Esik hesabi: 1. kademenin en kotu karedeki (8) kazanci ~38px, o karenin acigi ise 710px'te ~58px ve her 1px viewport'la 1px azaliyor. Gövde, nav seridinin ustunu de temizlemek icin sahneden ~18px KISA kalmali, yani 1. kademe tek basina ancak acik <= 20px iken, kabaca 748px'in uzerinde yetiyor. 760px o sinirin uzerinde, paylı bir deger. Daha kisasinda tipografi tabanlarini indirmek sart: bunlar rem oldugu icin kisa ekranda kendiliginden kuculmuyorlar, sorunun kok sebebi de bu. Olculu: hicbir deger 0.75rem'in (12px) altina inmiyor - dosyanin yazili okunabilirlik tabani. ⚠ BALON BURAYA GIRMEZ (R16, kullanici karari): "konusma balonu yazilari 1rem olacak" kurali PC cozunurlukleri icin gecerli, ve bu sorgu genislikten bagimsiz oldugu icin genis ama kisa bir masaustu penceresini de yakaliyordu. Balon yalnizca GENISLIK tabanli mobil/tablet sorgusunda (max-width: 767.98px) kuculur. Buradaki acik, balon disi bilesenlerden ve bosluktan kapatiliyor. */ @media (max-height: 760px) { .leo-tour__frame[data-leo-frame] { --leo-sub-font: .8125rem; --leo-scene-font: .75rem; /* R16: balon 16px'e donunce 3. (+8px), 9. (+3px) ve 8. (+1px) karelerde nav seridine binme kaldi. Tipografiye donmek yerine 1. kademenin boslugu bir adim daha kisiliyor: panel dolgusu 6->4, panel ve govde bosluklari 4->3, halkalar bir kademe kucuk, ayraclar 5->4. */ --leo-panel-pad: 4px; --leo-panel-gap: 3px; --leo-body-gap: 3px; --leo-row-pad: 2px; } .leo-tour__ring { --leo-ring-size: 36px; } /* --sm 1. kademedeki 36px'te BIRAKILIYOR. ::before 6px inset aldigi icin 36px'lik halkanin cekirdegi 24px; 18px'lik rakamin satir kutusu ~22px, yani tam oturuyor. 32px'e indirmek cekirdegi 20px yapar ve rakam yine cepere degerdi - 2. maddede halkadan cikardigimiz sorunun aynisi. Zaten hicbir sey de kazandirmiyordu: hem 8. hem 10. karede satirin yuksekligini halka degil yanindaki metin kolonu belirliyor. Etiketsiz --xs iniyor. */ .leo-tour__ring--xs { --leo-ring-size: 22px; } .leo-tour__exam-head, .leo-tour__score { padding-bottom: 4px; } .leo-tour__meter, .leo-tour__share, .leo-tour__tools { padding-top: 4px; } .leo-tour__guide { gap: 3px; } .leo-tour__guide-next { padding-top: 4px; } /* 3. karenin kapanis butonu: kare dosyadaki en yogun kolon. */ .leo-tour__frame[data-leo-frame="3"] .leo-tour__gate { padding: 5px 16px; } .leo-tour__rcard { gap: 1px; } .leo-tour__qmenu, .leo-tour__elist { gap: 2px; } .leo-tour__delta { padding-block: 2px; } /* Satir basina tekrarlayan 13px'lik yazilar 12px'e iniyor: tasarrufu satir sayisi carpiyor, en cok da 8. karede (12 satir). */ .leo-tour__rrow, .leo-tour__rcard b, .leo-tour__priority, .leo-tour__pick, .leo-tour__diff-chip, .leo-tour__guide-band, .leo-tour__school, .leo-tour__delta, .leo-tour__book-card b, .leo-tour__exam-title, /* R16: 10. karenin koc cumlesi uzadi (kullanici metni) ve tek satirdan iki satira cikti; ayni muameleyi goruyor ki kare yukseklik butcesini geri kazansin. */ .leo-tour__coach { font-size: .75rem; } } /* --- MOBIL TIPOGRAFI KADEMESI (genislik <= 767.98px) — DOSYANIN EN SONUNDA OLMAK ZORUNDA. Sebebi siralama: yukaridaki iki yukseklik kademesi ayni secicide (.leo-tour__frame[data-leo-frame]) --leo-scene-font: .75rem ve --leo-sub-font: .8125rem tanimliyor, ve BIR TELEFON HER ZAMAN KISA VIEWPORT'TUR - yani o kademeler telefonda da aktif. Bu blok once gelseydi 12px'lik degerleri onlar geri yazardi. Ayni ozgullukte oldugu icin kazanan, dosyada sonra gelen olur; bu yuzden burada. Mobilde 12px tabani artik baglayici degil (kullanici: "mobilde, tablette kisabiliriz tabii ki"). Bu bir GENISLIK sorgusu: genis ama kisa masaustu pencerelerine dokunmaz, orada satirlar 12px ve balon 1rem olarak kalir. Hiyerarsi: balon govdesi 14px > balon basligi 15px'ten kucuk degil, alt cumle 12px, satirlar ve sahne metni 11px. Balon kartin en kucuk yazisi olmuyor, aradaki fark iki kademe. */ @media (max-width: 767.98px) { .leo-tour__frame[data-leo-frame] { --leo-scene-font: .6875rem; --leo-qb-font: .6875rem; --leo-sub-font: .75rem; } /* Satir basina tekrarlayan yazilar: kazanci satir sayisi carpiyor. */ .leo-tour__rrow, .leo-tour__rcard b, .leo-tour__priority, .leo-tour__pick, .leo-tour__diff-chip, .leo-tour__guide-band, .leo-tour__guide-meta, .leo-tour__school, .leo-tour__delta, .leo-tour__book-card b, .leo-tour__exam-title, .leo-tour__coach, .leo-tour__hint, .leo-tour__foot, .leo-tour__strip-cell { font-size: .6875rem; } } /* Reduced motion — son hâl anında basılır, gezinme çalışmaya devam eder. Nabız gibi atan ışımalar kapanır; statik ışıma tokenları yerinde kalır. */ @media (prefers-reduced-motion: reduce) { .leo-tour__dwellbar, .leo-tour__leo, .leo-tour__bubble, .leo-tour__strip-cell, .leo-tour__note, .leo-tour__badge, .leo-tour__qmenu-row, .leo-tour__erow, .leo-tour__tier, .leo-tour__topic, .leo-tour__diff-chip--on, .leo-tour__coach-row, .leo-tour__module, .leo-tour__delta, .leo-tour__rcard, .leo-tour__book-card, .leo-tour__book-q i, .leo-tour__ring, .leo-tour__priority, .leo-tour__coach, .leo-tour__stat, .leo-tour__school, .leo-tour__link, .leo-tour__gate, .leo-tour__offer, .leo-tour__guide, .leo-tour__qb, .leo-tour__qb-top, .leo-tour__qb-head, .leo-tour__qb-rule, .leo-tour__qb-q, .leo-tour__qb-line, .leo-tour__qb-line--out .leo-tour__qb-cross, .leo-tour__qb-line--out .leo-tour__qb-choice, .leo-tour__qb-line--right .leo-tour__qb-choice, .leo-tour__qb-line--right .leo-tour__qb-choice b, .leo-tour__qb-ask { animation: none; } .leo-tour__dwellbar { display: none; } .leo-tour__qb-q { clip-path: none; } .leo-tour__qb-line--out .leo-tour__qb-cross { background: var(--leo-qb-black-color); color: var(--leo-qb-card-color); } .leo-tour__qb-line--out .leo-tour__qb-choice { opacity: .45; background: var(--leo-qb-dim-fill-color); } .leo-tour__qb-line--right .leo-tour__qb-choice { border-color: var(--leo-ok-color); background: var(--leo-qb-ok-wash-color); } .leo-tour__qb-line--right .leo-tour__qb-choice b { background: var(--leo-ok-color); } .leo-tour__btn, .leo-tour__gate, .leo-tour__link, .leo-tour__nav-btn, .leo-tour__dot { transition: none; } }