/* ============================================================ INTERN WORLD — Main stylesheet (style.css) ============================================================ This file is divided into clear sections: 1. CSS VARIABLES — colors, fonts, spacing 2. DARK MODE VARIABLES — same names, different values 3. RESET — remove browser default styles 4. BASE STYLES — body, text, links 5. LAYOUT / CONTAINER — width and centering of content 6. TYPOGRAPHY — headings, paragraphs, scale 7. COMPONENTS — buttons, cards, badges 8. ANIMATIONS — fade-in for sections 9. NAVIGATION — styles for nav.html 10. FOOTER — styles for footer.html 11. RESPONSIVE — adjustments for mobile devices ⚠️ STUDENTS: This file is already prepared for you. Read the comments — you will understand what each part does. Your sections use these styles automatically. ============================================================ */ /* ============================================================ 1. CSS VARIABLES — LIGHT MODE (default theme) ============================================================ CSS variables are defined on :root (the whole page). Syntax: --variable-name: value; Usage: color: var(--text); */ :root { /* ── Background colors ── */ --bg: #FFFFFF; /* Main background — white */ --bg-subtle: #F8FAFC; /* Subtle background — for cards */ --bg-section: #F1F5F9; /* Background for alternating sections */ /* ── Text colors ── */ --text: #1E293B; /* Main text — dark slate */ --text-muted: #64748B; /* Secondary info — lighter */ --text-inverse: #FFFFFF; /* Text on dark backgrounds */ /* ── Brand colors ── */ --primary: #2563EB; /* Blue — main color */ --primary-hover:#1D4ED8; /* Darker blue — for hover effect */ --accent: #F97316; /* Orange — accent color */ --highlight: #FACC15; /* Yellow — for highlighting */ /* ── Borders and shadows ── */ --border: #E2E8F0; /* Border color */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); /* Card shadow */ /* ── Cards ── */ --card-bg: #FFFFFF; /* Card background */ /* ── Fonts ── */ --font-heading: 'Space Grotesk', sans-serif; /* For headings */ --font-body: 'Inter', sans-serif; /* For body text */ --font-code: 'Fira Code', monospace; /* For code/accents */ /* ── Spacing scale ── */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 2rem; /* 32px */ --space-xl: 4rem; /* 64px */ --space-2xl: 6rem; /* 96px */ /* ── Border radius ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* Fully rounded — for pill buttons */ /* ── Transitions ── */ --transition: all 0.25s ease; } /* ============================================================ 2. CSS VARIABLES — DARK MODE ============================================================ When JS adds data-theme="dark" to , these values replace the ones above. The NAMES are the same — only the VALUES change. That is the magic of CSS variables! */ [data-theme="dark"] { /* ── Background colors ── */ --bg: #0F172A; /* Main background — very dark */ --bg-subtle: #1E293B; /* Subtle background — dark */ --bg-section: #0F172A; /* Section background */ /* ── Text colors ── */ --text: #F1F5F9; /* Main text — almost white */ --text-muted: #94A3B8; /* Secondary info */ --text-inverse: #0F172A; /* Text on light backgrounds */ /* ── Brand colors — slightly brighter for dark background ── */ --primary: #3B82F6; /* Blue — brighter version */ --primary-hover:#60A5FA; /* Blue hover */ --accent: #F97316; /* Orange — same */ --highlight: #FACC15; /* Yellow — same */ /* ── Borders and shadows ── */ --border: #334155; /* Borders — darker */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); /* ── Cards ── */ --card-bg: #1E293B; /* Cards — dark slate */ } /* ============================================================ 3. RESET — Remove browser default styles ============================================================ Every browser (Chrome, Firefox, Safari) adds its own default styles. With reset we remove them so the page looks the same everywhere. */ *, *::before, *::after { box-sizing: border-box; /* Width includes padding and border */ margin: 0; /* Remove outer spacing */ padding: 0; /* Remove inner spacing */ } /* Smooth scrolling — no sudden jumps */ html { scroll-behavior: smooth; } /* Images never overflow their container */ img { max-width: 100%; display: block; } /* Links inherit color from their parent */ a { color: inherit; text-decoration: none; } /* Lists without bullets by default */ ul, ol { list-style: none; } /* ============================================================ 4. BASE STYLES — Body and base text ============================================================ */ body { font-family: var(--font-body); font-size: 1rem; /* 16px — base size */ line-height: 1.6; /* Space between lines */ color: var(--text); background-color: var(--bg); transition: var(--transition); /* Smooth light/dark transition */ } /* ============================================================ 5. LAYOUT / CONTAINER ============================================================ .container limits the content to a maximum width and centers it on the page. Each section wraps its content inside .container. */ .container { width: 100%; max-width: 1200px; /* Maximum content width */ margin: 0 auto; /* Centering — left and right auto */ padding: 0 var(--space-lg); /* Inner spacing left and right */ } /* Sections have vertical spacing */ .section { padding: var(--space-2xl) 0; } /* Alternating background for sections */ .section--alt { background-color: var(--bg-section); } /* ============================================================ 6. TYPOGRAPHY — Heading and text scale ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--text); } h1 { font-size: clamp(2.5rem, 5vw, 4rem); } /* Hero heading */ h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } /* Section heading */ h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } /* Sub-heading */ h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.875rem; } p { color: var(--text-muted); line-height: 1.75; max-width: 65ch; /* Optimal reading width */ } /* Accent text using code font */ .label { font-family: var(--font-code); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); } /* Highlighted text with yellow background */ mark { background-color: var(--highlight); color: var(--text); padding: 0 4px; border-radius: var(--radius-sm); } /* ============================================================ 7. COMPONENTS — Buttons, cards, badges ============================================================ */ /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.75rem 1.75rem; border-radius: var(--radius-full); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; text-decoration: none; } /* Primary button — blue background */ .btn--primary { background-color: var(--primary); color: var(--text-inverse); } .btn--primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); /* Slight lift on hover */ } /* Secondary button — outline only */ .btn--outline { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn--outline:hover { background-color: var(--primary); color: var(--text-inverse); } /* ── Card ── */ .card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow); transition: var(--transition); } .card:hover { transform: translateY(-4px); /* Lift on hover */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } /* ── Badge ── */ .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; font-family: var(--font-code); } .badge--primary { background-color: rgba(37, 99, 235, 0.1); color: var(--primary); } .badge--accent { background-color: rgba(249, 115, 22, 0.1); color: var(--accent); } .badge--active { background-color: rgba(34, 197, 94, 0.1); color: #16A34A; } /* ── Card grid ── */ .grid { display: grid; gap: var(--space-lg); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* ============================================================ 8. ANIMATIONS — Fade-in for sections ============================================================ Each section starts invisible (opacity: 0) and "drops" into position (translateY). JavaScript activates .is-visible when the user scrolls to the section. */ /* Initial state — invisible, shifted down */ .fade-in { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } /* Final state — visible, in its place */ .fade-in.is-visible { opacity: 1; transform: translateY(0); } /* Delay for subsequent elements — cascade effect */ .fade-in:nth-child(2) { transition-delay: 0.1s; } .fade-in:nth-child(3) { transition-delay: 0.2s; } .fade-in:nth-child(4) { transition-delay: 0.3s; } .fade-in:nth-child(5) { transition-delay: 0.4s; } /* ============================================================ 9. NAVIGATION ============================================================ */ .nav { position: fixed; /* Stays at top while scrolling */ top: 0; left: 0; right: 0; z-index: 1000; /* Above everything on the page */ background-color: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); /* Glass effect */ -webkit-backdrop-filter: blur(12px); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } /* Logo */ .nav__logo { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; text-decoration: none; } .nav__logo .logo-intern { color: var(--primary); } /* Intern = blue */ .nav__logo .logo-world { color: var(--accent); } /* World = orange */ /* Navigation links */ .nav__links { display: flex; align-items:center; gap: var(--space-lg); list-style: none; } .nav__links a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration:none; transition: var(--transition); } .nav__links a:hover { color: var(--primary); } /* Right side — dark mode button */ .nav__actions { display: flex; align-items:center; gap: var(--space-md); } /* Theme toggle button */ .theme-toggle { background: var(--bg-subtle); border: 1px solid var(--border); border-radius:var(--radius-full); padding: 0.4rem 1rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--text); cursor: pointer; transition: var(--transition); } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } /* Space below nav so it doesn't cover the hero */ body { padding-top: 68px; } /* ============================================================ 9b. BACK TO TOP BUTTON ============================================================ Fixed bottom-right, hidden until js/main.js adds .is-visible (once the visitor scrolls past the hero section). */ .back-to-top { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 900; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary); color: var(--text-inverse); font-size: 1.25rem; text-decoration: none; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: var(--transition); } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background-color: var(--primary-hover); transform: translateY(-4px); } @media (max-width: 480px) { .back-to-top { right: var(--space-md); bottom: var(--space-md); width: 42px; height: 42px; } } /* ============================================================ 10. FOOTER ============================================================ */ .footer { background-color: var(--bg-subtle); border-top: 1px solid var(--border); padding: var(--space-xl) 0 var(--space-lg); } .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border); margin-bottom: var(--space-lg); } .footer__logo { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom:var(--space-sm); } .footer__logo .logo-intern { color: var(--primary); } .footer__logo .logo-world { color: var(--accent); } .footer__tagline { font-size: 0.875rem; color: var(--text-muted); max-width: 280px; } .footer__heading { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin-bottom: var(--space-md); } .footer__links { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; } .footer__links a { font-size: 0.875rem; color: var(--text-muted); text-decoration:none; transition: var(--transition); } .footer__links a:hover { color: var(--primary); } .footer__bottom { display: flex; justify-content:space-between; align-items: center; font-size: 0.8rem; color: var(--text-muted); } .footer__bottom a { color: var(--accent); text-decoration:none; } /* ============================================================ 11. RESPONSIVE — Adjustments for different screen sizes ============================================================ @media rules say: "If the screen is smaller than X, apply these styles." Breakpoints: - Tablet: max-width: 768px - Mobile: max-width: 480px */ @media (max-width: 768px) { /* Grids become 1 column */ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } /* Navigation — links hidden on mobile */ .nav__links { display: none; } /* Footer — 1 column */ .footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); } .footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; } /* Smaller vertical spacing */ .section { padding: var(--space-xl) 0; } } @media (max-width: 480px) { /* Container — smaller padding on mobile */ .container { padding: 0 var(--space-md); } } /* ============================================================ 12. WELCOME SECTION ============================================================ The first section every visitor sees. Full viewport height, centered, with a warm entry feel. */ .welcome { min-height: 100vh; /* Full screen height */ display: flex; align-items: center; padding: var(--space-2xl) 0; background: var(--bg); border-bottom: 1px solid var(--border); } /* Main brand title */ .welcome__title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; line-height: 1; margin-bottom:var(--space-md); } /* Tagline below the title */ .welcome__tagline { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 500; color: var(--text-muted); max-width: 700px; margin-bottom:var(--space-lg); line-height: 1.4; } /* Mission blockquote */ .welcome__mission { border-left: 4px solid var(--primary); padding-left: var(--space-lg); margin: 0 0 var(--space-lg) 0; max-width: 600px; } .welcome__mission p { font-size: 1.05rem; color: var(--text); max-width: none; } /* Horizontal divider */ .welcome__divider { border: none; border-top: 1px solid var(--border); margin: var(--space-lg) 0; } /* Cards grid — inherits .grid .grid--3 */ .welcome__cards { margin-bottom: var(--space-xl); } /* Each visitor-type card */ .welcome__card { display: flex; flex-direction: column; gap: var(--space-md); } /* Emoji icon figure */ .welcome__icon-figure { display: flex; align-items:center; gap: var(--space-sm); margin: 0; } .welcome__icon { font-size: 2rem; line-height:1; } /* Lists inside cards */ .welcome__list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; padding: 0; } .welcome__list li { font-size: 0.9rem; color: var(--text-muted); } /* Expandable details block */ .welcome__details { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: 0.875rem; color: var(--text-muted); } .welcome__details summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; padding: var(--space-xs) 0; } .welcome__details summary::-webkit-details-marker { display: none; /* Hide default arrow in Chrome/Safari */ } .welcome__details summary::before { content: '▸ '; /* Custom arrow indicator */ color: var(--accent); } .welcome__details[open] summary::before { content: '▾ '; /* Arrow rotates when open */ } .welcome__details p, .welcome__details ol { margin-top: var(--space-sm); } .welcome__steps { padding-left: var(--space-md); list-style: decimal; display: flex; flex-direction:column; gap: var(--space-xs); font-size: 0.875rem; color: var(--text-muted); } /* Contact address inside card */ .welcome__contact { font-style: normal; font-size: 0.875rem; margin-top: auto; /* Pushes contact to bottom of card */ } .welcome__contact a { color: var(--primary); text-decoration: none; font-weight: 500; transition: var(--transition); } .welcome__contact a:hover { color: var(--accent); text-decoration: underline; } /* Contextual jump-link — routes each visitor type straight to the section that matters to them, instead of a generic "scroll down". */ .welcome__jumplink { font-size: 0.875rem; } .welcome__jumplink a { color: var(--primary); font-weight: 600; text-decoration: none; transition: var(--transition); } .welcome__jumplink a:hover { color: var(--accent); text-decoration: underline; } /* Meta info — date, small details */ .welcome__meta { font-size: 0.8rem; color: var(--text-muted); margin-top: auto; max-width: none; } /* Bottom strip — scroll invitation */ .welcome__footer-strip { text-align: center; padding-top: var(--space-lg); border-top: 1px solid var(--border); } .welcome__footer-strip p { max-width: none; color: var(--text-muted); font-size: 0.95rem; margin-bottom:var(--space-xs); } /* Responsive — stack cards on mobile */ @media (max-width: 768px) { .welcome { padding: var(--space-xl) 0; min-height: auto; } .welcome__cards { grid-template-columns: 1fr; } } /* ============================================================ 12b. ABOUT SECTION ============================================================ Left-accent border for the intro paragraph — same visual language as .welcome__mission (colored bar down the left edge), but in the accent color so it doesn't compete with the blockquote right below it. No box, no shadow, no hover — just enough to say "read this first" without looking like a stray product card in the middle of a paragraph. */ .about__intro { border-left: 4px solid var(--accent); padding-left: var(--space-lg); max-width: none; } /* ============================================================ 12c. PROJECTS SECTION ============================================================ Both project cards share one skeleton — icon, status badge, heading, description, a single-line row of meta chips — so they read as a matched pair even though one has much more content than the other. No project image/logo: the old 180x180 favicon PNG had no size constraint and rendered oversized, so it's replaced with a small icon circle instead. */ .project-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .project-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: rgba(37, 99, 235, 0.1); font-size: 1.75rem; } .project-icon--accent { background-color: rgba(249, 115, 22, 0.1); } .project-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; } /* ============================================================ 12d. CTA SECTION ============================================================ A big highlighted panel instead of a plain vertical stack of headings/lists — a soft brand-color gradient, a border and shadow so it reads as a designed part of the page rather than a leftover block of text at the bottom. The benefit list and step list sit in their own .card blocks (grid grid--2), same pattern already used for features/projects, so it feels like the rest of the site rather than a one-off layout. */ .cta-panel { background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(249, 115, 22, 0.07)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-2xl) var(--space-lg); text-align: center; } .cta-panel > p { max-width: 620px; margin: 0 auto; } .cta-panel__grid { margin: var(--space-xl) 0; text-align: left; } .cta-panel__block h3 { margin-bottom: var(--space-sm); } .cta-panel__list { display: flex; flex-direction: column; gap: var(--space-xs); color: var(--text-muted); } .cta-panel__list--steps { list-style: decimal; padding-left: 1.25em; } .cta-panel__highlight { max-width: 620px; margin: var(--space-lg) auto; } .cta-panel__contact { font-style: normal; margin-bottom: var(--space-md); } .cta-panel__contact a { color: var(--primary); font-weight: 600; } .cta-panel__button { font-size: 1.05rem; padding: 1rem 2.5rem; } /* ============================================================ 12e. CLIENTS SECTION ============================================================ A full-bleed dark band — the one section on the page that deliberately breaks from the light background used everywhere else. That contrast is the whole point: it's meant to interrupt the scroll and grab attention as the pitch to potential clients. The background/text colors below are fixed hex values, NOT theme variables. var(--text)/var(--text-inverse) flip between light and dark mode, which would undo the contrast this band is built for — so this section intentionally ignores the theme and always renders as a dark band with light text, in both light and dark mode. */ .clients-band { background-color: #1E293B; color: #F1F5F9; text-align: center; padding: var(--space-2xl) 0; } .clients-band .label { color: var(--highlight); } .clients-band h2 { color: #FFFFFF; } /* The "who this is for" badge — sits between the label and the headline so the target audience is unmistakable at a glance, before anyone even reads a full sentence. */ .clients-band__badge { display: inline-block; margin: var(--space-sm) 0 var(--space-md); } .clients-band__intro { color: #CBD5E1; max-width: 620px; margin: 0 auto; } .clients-band__benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); margin: var(--space-xl) 0; text-align: left; } .clients-band__benefit { flex: 1 1 220px; max-width: 280px; padding: var(--space-md); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); } .clients-band__benefit-icon { display: block; font-size: 1.75rem; margin-bottom: var(--space-sm); } .clients-band__benefit h3 { color: #FFFFFF; font-size: 1.05rem; margin-bottom: var(--space-xs); } .clients-band__benefit p { color: #94A3B8; font-size: 0.9rem; max-width: none; margin: 0; } .clients-band__highlight { max-width: 620px; margin: var(--space-lg) auto; } .clients-band__button { font-size: 1.05rem; padding: 1rem 2.5rem; } @media (max-width: 768px) { .clients-band { padding: var(--space-xl) 0; } } /* ============================================================ 13. TEAM SECTION ============================================================ Flip cards for team.html — front shows the avatar/role/ skills, back reveals a personal one-liner. Flip trigger is different depending on the device: - Desktop (real mouse, hover capable) → hover to flip - Mobile / touch (no hover) → tap to flip Both are powered by a hidden checkbox — no JavaScript needed. */ .avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background-color: var(--primary); color: white; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-bottom: var(--space-md); } /* Alternating avatar color — orange instead of blue */ .avatar-initials--accent { background-color: var(--accent); } /* ── Avatar with photo fallback ── Each member will eventually generate their own photo. Until that file exists, the initials circle keeps showing — the stays hidden and only reveals itself (via the onload handler in the HTML) once it has actually finished loading. A missing photo just never fires onload, so nothing changes and the initials stay put. */ .member-avatar { position: relative; display: inline-block; } .member-avatar__photo { position: absolute; inset: 0; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: none; } .member-avatar--has-photo .member-avatar__photo { display: block; } .member-avatar--has-photo .avatar-initials { visibility: hidden; } /* ── Card wrapper — holds the flip card + the founder badge as siblings, so hovering the badge doesn't also count as hovering the flip card ── */ .team-card-wrapper { position: relative; } /* ── Flip card wrapper ── */ .team-flip-card { display: block; position: relative; min-height: 340px; cursor: pointer; perspective: 1200px; } /* Hidden checkbox — still focusable/toggleable with the keyboard */ .team-flip-card__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .team-flip-card__inner { position: relative; width: 100%; height: 100%; min-height: 340px; transition: transform 0.6s; transform-style: preserve-3d; } /* Tap/click to flip — works on every device */ .team-flip-card__toggle:checked ~ .team-flip-card__inner { transform: rotateY(180deg); } /* Hover to flip — only on devices with a real mouse, so touchscreens rely on tap instead of a hover that never fires */ @media (hover: hover) and (pointer: fine) { .team-flip-card:hover .team-flip-card__inner { transform: rotateY(180deg); } } .team-flip-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .team-flip-card__face--back { transform: rotateY(180deg); justify-content: center; } /* Founder badge — icon + number chip, top-right corner of the card. The "1" is the same on every card — it marks "Тим 1" (this cohort), not a personal rank, so no one member is singled out as first/best. The full Macedonian label only shows up in a small tooltip on hover. It's positioned relative to .team-card-wrapper (a sibling of the flip card, not a child of it). That's deliberate: if it lived inside the flip card, hovering it would also register as hovering the card and trigger the flip before the tooltip could ever be read. As a sibling it stays fixed in place — visible whether the front or back face is showing — and its own hover works independently. */ .team-founder-badge { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: default; } .team-founder-badge__icon { pointer-events: none; } /* Small number chip, overlapping the bottom-right of the icon circle like a notification count */ .team-founder-badge__number { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background-color: var(--primary); color: var(--text-inverse); font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; border-radius: 50%; border: 2px solid var(--card-bg); } /* Tooltip — hidden by default, only fades in on real hover devices */ .team-founder-badge__tooltip { position: absolute; bottom: calc(100% + 8px); right: 0; background-color: var(--text); color: var(--bg); font-family: var(--font-code); font-size: 0.7rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } @media (hover: hover) and (pointer: fine) { .team-founder-badge:hover .team-founder-badge__tooltip, .team-founder-badge:focus-visible .team-founder-badge__tooltip { opacity: 1; } } /* Skills — single row of small chips instead of a stacked list */ .team-skills { display: flex; flex-wrap: wrap; justify-content:center; gap: var(--space-xs); margin-top: var(--space-sm); list-style: none; padding: 0; } .team-skills li { font-size: 0.7rem; } /* Small flip affordance icon */ .team-flip-hint { position: absolute; bottom: var(--space-md); right: var(--space-md); font-size: 1rem; color: var(--text-muted); opacity: 0.6; } /* Personal one-liner on the back face */ .team-quote { font-style: italic; font-size: 0.95rem; color: var(--text); max-width: none; } /* Shared contact line below the grid — replaces per-person email */ .team-contact { text-align: center; margin-top: var(--space-lg); font-size: 0.9rem; color: var(--text-muted); } .team-contact a { color: var(--primary); font-weight: 600; text-decoration: none; } .team-contact a:hover { text-decoration: underline; } @media (max-width: 768px) { .team-flip-card, .team-flip-card__inner { min-height: 300px; } }