/* ===================================================================== Tatevik Vasilyan — Portfolio main.css · design system + shared components + Home page Built from Figma "Web_Coolio" (file qwqiawIxQElAwicBL7tUKz) Breakpoints mirror the Figma frames: Mobile <768 (frame 402) Tablet 768–1023 (frame 744) Desktop 1024–1439 (frame 1280) Wide >=1440 (frame 1920) ===================================================================== */ /* ------------------------------------------------------------------ */ /* 1. Fonts */ /* Suisse Intl Trial is bundled locally. Drop the .otf files that */ /* ship with the project into assets/fonts/ (exact filenames */ /* below) and every weight resolves. Prata (section headings) is a */ /* free Google serif, linked in each page . */ /* ------------------------------------------------------------------ */ @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-LightIt.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-RegularIt.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap} /* "Book" is 450 — a real intermediate weight in Suisse. */ @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Book.otf") format("opentype");font-weight:450;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-BookIt.otf") format("opentype");font-weight:450;font-style:italic;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-MediumIt.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-SemiboldIt.otf") format("opentype");font-weight:600;font-style:italic;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-BoldIt.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-BlackIt.otf") format("opentype");font-weight:900;font-style:italic;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-Hairline.otf") format("opentype");font-weight:100;font-style:normal;font-display:swap} @font-face{font-family:"Suisse Intl Trial";src:url("../assets/fonts/SuisseIntlTrial-HairlineIt.otf") format("opentype");font-weight:100;font-style:italic;font-display:swap} /* ------------------------------------------------------------------ */ /* 2. Design tokens */ /* ------------------------------------------------------------------ */ :root{ /* palette */ --coral:#f25a5c; --coral-deep:#de3437; --red-ink:#97080b; --blue:#2b50b1; --blue-bright:#0139cd; --white:#ffffff; --paper:#fffcf8; --offwhite:#f7f6f3; --ink:#111111; --gray:#888684; --gray-2:#707070; --gray-3:#F4F3F0; --gray-p:#4a4a47; --olive:#e5e9e1; --dusty-olive:#727D71; --blue-mute:#aab9e0; --img-bg:#eef1ca; --pill-lime-bg:#eaf3b6; --pill-lime-bd:#dde89d; --pill-purple-bg:#ebc4ff; --pill-purple-bd:#d6a8ee; --pill-lime2-bg:#f5ffbe; --pill-lime2-bd:#e1eda0; /* type */ --sans:"Suisse Intl Trial","Helvetica Neue",Arial,sans-serif; --serif:"Prata",Georgia,"Times New Roman",serif; /* layout */ --content-max:1200px; --pad-x:20px; /* mobile default */ --marquee-speed:38s; /* seconds for one full loop of a marquee */ --ease:cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------------------ */ /* 3. Reset / base */ /* ------------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* anchor target offset so the sticky nav doesn't cover the heading */ #work{scroll-margin-top:80px} body{ margin:0; font-family:var(--sans); font-weight:400; color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} p{margin:0} svg{display:block} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} /* page wrapper stacks full-width bands */ .page{display:flex;flex-direction:column} /* centered content container inside each full-width band */ .container{ width:100%; max-width:calc(var(--content-max) + var(--pad-x)*2); margin-inline:auto; padding-inline:var(--pad-x); } /* icon sizing */ .icon{width:20px;height:20px;flex:none;color:currentColor} .icon svg{width:100%;height:100%;fill:currentColor} .icon--sm{width:16px;height:16px} .icon--lg{width:30px;height:30px} .icon--xl{width:32px;height:32px} /* ------------------------------------------------------------------ */ /* 4. Top navigation */ /* ------------------------------------------------------------------ */ .topbar{background:var(--white)} .nav{ display:flex;align-items:center;justify-content:space-between; border-radius:60px; } .nav__avatar{ width:72px;height:72px;flex:none;border-radius:70px; border:3px solid var(--coral-deep);overflow:hidden;background:var(--offwhite); } .nav__avatar img{width:100%;height:100%;object-fit:cover;object-position:center 20%} .nav__links{display:flex;align-items:center;gap:20px;justify-content:flex-end} .nav__link{ display:flex;align-items:center;gap:10px;padding-inline:20px;border-radius:70px; color:var(--gray-p);font-size:20px;line-height:60px; transition:color .25s var(--ease); } .nav__link .icon{transition:transform .25s var(--ease);} .nav__link:hover{color:var(--blue)} .nav__link:hover .icon{transform:translateX(3px)} .nav__link[aria-current="page"]{color:var(--blue)} .nav__burger{display:none;width:32px;height:32px;color:var(--ink)} .nav__link:hover .icon.res{transform:translateY(3px) !important} /* ------------------------------------------------------------------ */ /* 5. Sticky scroll nav */ /* ------------------------------------------------------------------ */ .scrollnav{ position:fixed;top:10px;left:50%; transform:translate(-50%,-140%); width:min(1200px,calc(100% - var(--pad-x)*2)); z-index:60; opacity:0;pointer-events:none; transition:transform .45s var(--ease),opacity .35s var(--ease); max-width:780px; } .scrollnav.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto} .scrollnav__inner{ display:flex;align-items:center;justify-content:space-between; background:var(--white);border-radius:60px;height:56px; box-shadow:0 4px 7.5px rgba(0,0,0,.1); } .scrollnav__home{display:flex;align-items:center;gap:10px;padding-right:20px;color:var(--gray-p);font-size:16px; margin-left:20px} .scrollnav__home .icon{transition:transform .25s var(--ease); width:18px; height: 18px; color:var(--gray-p)} .scrollnav__home:hover .icon{transform:translateX(-3px)} .scrollnav__links{display:flex;align-items:center;justify-content:flex-end} .scrollnav__link{display:flex;align-items:center;gap:10px;padding-inline:20px;color:var(--gray-p);font-size:16px;transition:color .25s var(--ease)} .scrollnav__link .icon{transition:transform .25s var(--ease); width:18px; height: 18px;} .scrollnav__link:hover{color:var(--blue)} .scrollnav__link:hover .icon{transform:translateX(3px); color:var(--blue);} .scrollnav__link[aria-current="page"]{color:var(--blue)} .scrollnav__link:hover .icon.res{transform:translateY(3px)} .scrollnav__avatar{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid var(--coral-deep);overflow:hidden;background:var(--offwhite);margin-left:10px} .scrollnav__avatar img{width:100%;height:100%;object-fit:cover;object-position:center 20%} /* ------------------------------------------------------------------ */ /* 6. Mobile menu overlay */ /* ------------------------------------------------------------------ */ .mobilemenu{ position:fixed;inset:0;z-index:80;background:var(--coral); display:flex;flex-direction:column; opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease); } .mobilemenu.is-open{opacity:1;visibility:visible} .mobilemenu__panel{ background:var(--paper);flex:1;display:flex;flex-direction:column; padding:20px 20px 20px;width:100%; } .mobilemenu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .mobilemenu__close{width:32px;height:32px;color:var(--ink)} .mobilemenu__item{ display:flex;align-items:center;justify-content:space-between; padding-block:4px;border-bottom:1px solid var(--blue); color:var(--blue);font-size:20px;line-height:60px;letter-spacing:.2px; opacity:0;transform:translateY(8px); } .mobilemenu.is-open .mobilemenu__item{animation:menuItemIn .4s var(--ease) forwards} .mobilemenu.is-open .mobilemenu__item:nth-of-type(1){animation-delay:.06s} .mobilemenu.is-open .mobilemenu__item:nth-of-type(2){animation-delay:.13s} .mobilemenu.is-open .mobilemenu__item:nth-of-type(3){animation-delay:.20s} .mobilemenu.is-open .mobilemenu__item:nth-of-type(4){animation-delay:.27s} .mobilemenu__item[aria-current="page"]{color:var(--blue)} @keyframes menuItemIn{to{opacity:1;transform:translateY(0)}} /* ------------------------------------------------------------------ */ /* 7. Marquee (running text) */ /* ------------------------------------------------------------------ */ .marquee{overflow:hidden;width:100%;display:flex} .marquee__track{ display:flex;align-items:center;flex:none; animation:marquee var(--marquee-speed) linear infinite; will-change:transform; } .marquee__group{display:flex;align-items:center;gap:11px;padding-right:11px;flex:none} .marquee__group p{white-space:nowrap;font-size:16px;line-height:48px} .marquee__sep{flex:none;color:var(--coral);font-size: 13px;line-height: 48px;} .marquee__sep svg{width:100%;height:100%} .marquee__home{color:var(--white);font-size:13px; opacity:60%} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee:hover .marquee__track.is-pausable{animation-play-state:running} /* default keeps running */ /* top blue marquee */ .marquee--top{background:var(--blue)} .marquee--top .marquee__group p{color:var(--paper)} .marquee--top .marquee__sep svg{fill:var(--paper)} /* footer coral marquee */ .marquee--foot{background:var(--coral)} .marquee--foot .marquee__group p{color:var(--red-ink)} .marquee--foot .marquee__sep svg{fill:var(--red-ink)} /* ------------------------------------------------------------------ */ /* 8. Buttons & pills */ /* ------------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; border-radius:60px;border:1px solid var(--blue); padding:0 14px 0 16px;color:var(--blue); font-weight:450;font-size:16px;line-height:40px;white-space:nowrap; width:max-content;align-self:flex-start; transition:background .3s var(--ease),color .3s var(--ease); } .btn .icon{transition:transform .25s var(--ease)} /* View showcase — hover fills blue, text/icon white */ .btn--showcase:hover{background:var(--blue);color:var(--white)} .btn--showcase:hover .icon{transform:translateX(3px)} /* View project (on blue card) — white border/text, hover fills white, text blue */ .btn--project{border-color:var(--white);color:var(--white)} .btn--project:hover{background:var(--white);color:var(--blue)} .btn--project:hover .icon{transform:translateX(3px)} .pill{ display:inline-flex;align-items:center;justify-content:center; padding-inline:8px;border-radius:57px; font-weight:450;font-size:14px;line-height:24px;white-space:nowrap;color:var(--ink); } .pill--lime{background:var(--pill-lime-bg);border:1px solid var(--pill-lime-bd)} .pill--purple{background:var(--pill-purple-bg);border:1px solid var(--pill-purple-bd)} .pill--lime2{background:var(--pill-lime2-bg);border:1px solid var(--pill-lime2-bd);color:var(--gray-2)} /* meta line (tags row): pill ✦ text ✦ text */ .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%} .meta__star{font-size:14px;line-height:32px;color:var(--ink)} .meta__txt{font-size:16px;line-height:24px;white-space:nowrap} /* ------------------------------------------------------------------ */ /* 9. Hero */ /* ------------------------------------------------------------------ */ .hero{background:var(--white);min-height:100svh;min-height:100dvh;display:flex;flex-direction:column} .hero__inner{flex:1 0 auto;display:flex;flex-direction:column;gap:50px;padding-top:10px;/*padding-bottom:80px*/} .hero__top{flex:1 0 auto;display:flex;flex-direction:column;gap:80px} .hero__headline{color:var(--blue-bright);font-weight:300;font-size:40px;line-height:44px} .hero__headline .em{font-weight:400} .hero__headline .ring{color:var(--coral-deep)} /* ------------------------------------------------------------------ */ /* 10. Selected Work / section shell */ /* ------------------------------------------------------------------ */ .section-serif{font-family:var(--serif);font-weight:400;color:var(--blue);font-size:32px;line-height:42px; margin: 0;} .work{background:var(--offwhite)} .work__inner{display:flex;flex-direction:column;gap:48px;padding-top:40px;padding-bottom:80px} .work__intro{display:flex;flex-direction:column;gap:20px} .work__intro p:last-child{font-size:16px;line-height:24px;color:var(--ink)} .work__cards{display:flex;flex-direction:column;gap:24px} /* case card (Selected Work) */ .case{background:var(--white);display:flex;flex-direction:column;width:100%} .case__media{position:relative;background:var(--olive);width:100%;overflow:hidden} .case__media img{width:100%;height:100%;object-fit:cover} .case__body{display:flex;flex-direction:column;gap:32px;padding:20px 20px 40px} .case__text{display:flex;flex-direction:column;gap:16px} .case__title{font-weight:400;font-size:28px;line-height:36px; margin:0} .case__desc{font-size:16px;line-height:24px} /* mobile media: lime box with inset screenshot */ .case__media{height:300px} .case__media .shot{position:absolute;left:2%;top:36px;width:96%;height:auto} .case__media--offset .shot{left:5.5%;top:49px;width:93%} /* ------------------------------------------------------------------ */ /* 11. Personal Projects (Koob card) */ /* ------------------------------------------------------------------ */ .personal{background:var(--white)} .personal__inner{display:flex;flex-direction:column;gap:44px;padding-top:40px;padding-bottom:20px} .personal__head{margin-bottom:0} .koob{background:var(--blue);display:flex;flex-direction:column;width:100%} .koob__media{position:relative;width:100%;height:344px;overflow:hidden} .koob__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .koob__body{display:flex;flex-direction:column;gap:30px;padding:20px 20px 40px} .koob__text{display:flex;flex-direction:column;gap:16px} .koob__meta{display:flex;align-items:center;gap:16px} .koob__meta .meta__star{color:var(--blue-mute)} .koob__since{font-weight:400;font-size:16px;line-height:24px;color:rgba(255,255,255,.6)} .koob__title{font-weight:400;font-size:28px;line-height:40px;color:var(--white); margin:0} .koob__desc{font-size:16px;line-height:24px;color:var(--white)} /* ------------------------------------------------------------------ */ /* 12. Footer nav (big Work/About/Email/Resume + divider) */ /* ------------------------------------------------------------------ */ .footnav{display:flex;flex-direction:column;gap:20px} .footnav__rule{height:1px;width:100%;background:var(--blue)} .footnav__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px} .footnav__link{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:20px;line-height:64px;letter-spacing:.18px} .footnav__link .icon{transition:transform .25s var(--ease)} .footnav__link:hover .icon{transform:translateX(3px)} .footnav__link:hover .icon.res{transform:translateY(3px)} /* ------------------------------------------------------------------ */ /* 13. Responsive — Tablet (>=768) */ /* ------------------------------------------------------------------ */ @media(min-width:768px){ :root{--pad-x:40px} .hero__headline{font-size:64px;line-height:66px} .section-serif{font-size:40px;line-height:64px} .footnav{gap:40px} .footnav__links{gap:80px} .footnav__link{font-size:24px;font-weight:300;line-height:64px} .marquee--foot .marquee__group p{font-size:16px} .work__intro p:last-child{max-width:705px} .personal__inner{padding-bottom:44px;gap:44px} .exp__inner{padding-bottom:44px;} } /* ------------------------------------------------------------------ */ /* 14. Responsive — Desktop (>=1024): horizontal cards */ /* ------------------------------------------------------------------ */ @media(min-width:1024px){ :root{--pad-x:120px} /*.nav__link{font-size:20px}*/ .hero__headline{font-size:80px;line-height:73px} .footnav__link{font-size:40px;line-height:64px;letter-spacing:.4px;gap:20px} .footnav__link .icon{width:30px;height:30px} /* Selected Work card becomes a two-column row (text left, media right) */ .case{flex-direction:row;align-items:stretch} .case__col-text{order:1;flex:1 1 0;min-width:0;display:flex;align-items:center;padding:40px} .case__col-media{order:2; padding:0} .case__body{flex:1;padding:0;gap:48px;justify-content:center} .case__col-media{flex:1 1 0;min-width:0;display:flex;align-items:center;padding:0; max-width:420px} .case__media{height:100%} .case__media .shot{left:5%;top:37px;width:90%} .case__media--offset .shot{left:4.5%;top:42px;width:95%} /* Koob card becomes a two-column row (text left, media right) */ .koob{flex-direction:row;align-items:stretch;gap:40px} .koob__col-text{order:1;flex:none;width:612px;display:flex;align-items:center;padding:40px} .koob__col-media{order:2} .koob__body{gap:48px;padding:0} .koob__col-media{flex:1 1 0;min-width:0} .koob__media{height:100%;max-height:400px} .personal__inner{padding-top:44px} } /* ------------------------------------------------------------------ */ /* 15. Responsive — Wide (>=1440): center 1200 content */ /* ------------------------------------------------------------------ */ @media(min-width:1536px){ .container{padding-inline:0;max-width:var(--content-max)} /*.scrollnav{width:1200px}*/ .hero__headline {font-size: 90px;line-height: 90px;} } /* ------------------------------------------------------------------ */ /* 16. Reduced motion */ /* ------------------------------------------------------------------ */ @media(prefers-reduced-motion:reduce){ .marquee__track{animation:none;transform:none} .mobilemenu__item{animation:none;opacity:1;transform:none} .skillpill{opacity:1!important;transform:none!important;animation:none!important} *{scroll-behavior:auto!important} } /* ------------------------------------------------------------------ */ /* 17. Mobile floating menu button (sticky nav equivalent < 768) */ /* ------------------------------------------------------------------ */ .floatburger{ position:fixed;top:20px;right:20px;z-index:70; width:52px;height:52px;border-radius:50%;background:var(--white); box-shadow:0 4px 7.5px rgba(0,0,0,.12); display:flex;align-items:center;justify-content:center;color:var(--ink); opacity:0;transform:translateY(-140%); transition:transform .4s var(--ease),opacity .3s var(--ease); } .floatburger.is-visible{opacity:1;transform:translateY(0)} .floatburger svg{width:26px;height:26px} @media(min-width:768px){.floatburger{display:none}} @media(max-width:767px){ .scrollnav{display:none} /* mobile top nav collapses to avatar + burger (links live in the menu) */ .nav__links{display:none} .nav__burger{display:flex;align-items:center;justify-content:center} } /* ================================================================== */ /* ABOUT PAGE */ /* ================================================================== */ .theme-about{background:var(--blue)} .theme-home{background:var(--coral)} /* interior "Home" style top nav (replaces avatar) */ .nav--home{justify-content:space-between} .nav__home{display:flex;align-items:center;gap:10px;padding-right:20px;color:var(--gray-p);font-size:20px;line-height:60px;} .nav__home .icon{transition:transform .25s var(--ease); } .nav__home:hover .icon{transform:translateX(-3px)} .about-top{background:var(--paper)} .about-top__inner{display:flex;flex-direction:column;gap:60px;padding-top:16px;padding-bottom:80px} .about-grid{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start} .about-aside{display:flex;flex-direction:column;gap:32px} .about-photo{width:240px;height:320px;max-width:100%;border:6px solid var(--blue);overflow:hidden;background:var(--offwhite)} .about-photo img{width:100%;height:100%;object-fit:cover} .about-links{display:flex;flex-direction:column;gap:12px} .about-links a{color:var(--blue);font-style:italic;font-weight:450;font-size:20px;line-height:28px;text-decoration:underline;text-underline-offset:2px;width:max-content} .about-main{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:40px} .about-para{font-weight:300;font-size:24px;line-height:32px;color:var(--ink)} .about-para .em{font-weight:400} .about-label{font-style:italic;font-weight:450;color:var(--blue);margin-right:.6em; font-size: 20px;} .skillpills{display:flex;flex-wrap:wrap;gap:12px} .skillpill{ border:1px solid var(--blue);border-radius:60px;padding:14px 18px; font-size:16px;line-height:1;text-transform:uppercase;color:var(--blue);white-space:nowrap; opacity:0;transform:translateY(24px); } .skillpills.is-in .skillpill{animation:pillPop .45s var(--ease) forwards} .skillpills.is-in .skillpill:nth-child(1){animation-delay:.05s} .skillpills.is-in .skillpill:nth-child(2){animation-delay:.15s} .skillpills.is-in .skillpill:nth-child(3){animation-delay:.25s} .skillpills.is-in .skillpill:nth-child(4){animation-delay:.35s} .skillpills.is-in .skillpill:nth-child(5){animation-delay:.45s} .skillpills.is-in .skillpill:nth-child(6){animation-delay:.55s} @keyframes pillPop{to{opacity:1;transform:none}} /* testimonials */ .testi{background:var(--blue);overflow:hidden} .testi__head{padding-top:60px} .testi__head h2{font-weight:300;color:var(--paper);font-size:28px;line-height:38px;max-width:446px;margin:0} .testi__reviews{margin-top:0;padding-block:60px 80px} .testi__reviews .marquee__track{align-items:stretch} .reviews{display:flex;gap:20px;flex:none;padding-inline:10px} .review{ background:#2749a3;padding:32px;display:flex;flex-direction:column;gap:24px; width:300px;flex:none;color:var(--paper); } .review__num{font-weight:600;font-size:20px;line-height:32px} .review__quote{font-size:16px;line-height:24px} .review__quote p{margin-bottom:1em} .review__author{display:flex;gap:20px;align-items:center} .review__avatar{width:70px;height:70px;border-radius:70px;border:2px solid var(--blue);overflow:hidden;flex:none;background:#3a5cbf} .review__avatar img{width:100%;height:100%;object-fit:cover} .review__name{font-weight:600;font-size:16px;line-height:24px} .review__role{font-size:16px;line-height:24px;color:#a9b4d6} /* mobile: no loop — horizontal scroll */ @media(max-width:576px){ .testi__reviews{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} .testi__reviews .marquee__track{animation:none!important;transform:none!important;width: 100%;} .review{scroll-snap-align:start;width: 100%;} .reviews{flex-direction:column; width: 100%} } /* experience */ .exp{background:var(--paper)} .exp__inner{display:flex;flex-direction:column;gap:40px;padding-top:40px;padding-bottom:20px} .exp__group{display:flex;flex-direction:column;gap:40px} .exp__title{font-family:var(--serif);font-weight:400;color:var(--blue);font-size:32px;line-height:42px;margin:0} .exp__rows{display:flex;flex-direction:column;gap:40px} .exp__row{display:flex;flex-direction:column;gap:24px} .exp__co{display:flex;flex-direction:column;gap:12px} .exp__co-name{font-weight:500;font-size:28px;line-height:36px;color:var(--ink)} .exp__co-loc{font-size:16px;line-height:24px;color:var(--gray-2)} .exp__co-desc{font-size:16px;line-height:24px;color:var(--ink)} .exp__roles{display:flex;flex-direction:column;gap:32px;flex:1;min-width:0} .exp__role{display:flex;flex-direction:column;gap:16px} .exp__role-head{display:flex;flex-direction:column;gap:4px} .exp__role-title{font-weight:500;font-size:20px;line-height:36px;color:var(--ink)} .exp__role-date{font-size:16px;line-height:24px;color:var(--gray-2)} .exp__role-body{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:24px;color:var(--ink)} /* blue footer marquee variant */ .marquee--foot-blue{background:var(--blue)} .marquee--foot-blue .marquee__group p{color:var(--paper)} .marquee--foot-blue .marquee__sep svg{fill:var(--paper)} @media(min-width:768px){ .about-top__inner{gap:100px;padding-bottom:80px} .about-grid{gap:80px} .about-para{font-size:28px;line-height:38px} .skillpill{font-size:20px;padding:16px 21px} .testi__head h2{font-size:40px;line-height:56px} .review{width:460px;padding:40px} /*.reviews{padding-inline:40px}*/ .exp__title{font-size:40px;line-height:64px} .exp__row{flex-direction:row;gap:80px} .exp__co{width:240px;flex:none} } @media(min-width:1024px){ .review{width:600px} .about-para{font-size:32px;line-height:40px} .exp__group{gap:60px} } /* ================================================================== */ /* PROJECT / CASE STUDY PAGES */ /* ================================================================== */ .proj{background:var(--white)} .proj-hero{background:var(--white)} .proj-hero__inner{display:flex;flex-direction:column;gap:32px;padding-top:16px;padding-bottom:40px} .proj-heading{display:flex;flex-direction:column;gap:20px} .proj-title{font-weight:400;font-size:44px;line-height:50px;color:var(--ink);letter-spacing:-.01em; margin:0} .proj-sub{font-weight:400;font-size:22px;line-height:30px;color:var(--gray-p)} .proj-rule{height:1px;width:100%;background:rgba(17,17,17,.14)} .proj-meta{display:flex;flex-wrap:wrap;gap:24px 48px} .proj-metaitem{display:flex;flex-direction:column;gap:12px;min-width:220px;max-width:360px} .proj-metaitem .k{font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--gray-2)} .proj-metaitem .v{font-size:16px;line-height:24px;color:var(--gray-p)} /* banner (hero image strip) */ .proj-banner{width:100%;/*aspect-ratio: 1920/545;*/background:var(--olive);overflow:hidden} .proj-banner img{width:100%;height:100%;object-fit:cover} .koob-banner{aspect-ratio: 1920/545} /* generic section */ .proj-sec{background:var(--white)} .gray-sec{background:var(--gray-3)} .art-sec{background:var(--dusty-olive)} .cont-sec{border-radius: 20px;padding: 40px;} .proj-sec__inner{padding-top:56px;display:flex;flex-direction:column;gap:20px;padding-bottom: 20px;} .koob-page .proj-sec__inner{padding-top:0;} .art-sec h2, .art-sec p {color:var(--white)} .proj-h2{font-weight:400;font-size:24px;line-height:1.25;color:var(--ink); margin:0} .proj-p{font-size:16px;line-height:26px;color:var(--gray-p); max-width:640px} .proj-p--wide{max-width:960px} .proj-cols{display:flex;flex-direction:column;gap:32px} .proj-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px} /* image placeholder w/ caption */ .ph{overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray-2);font-size:13px;text-align:center} .ph img{width:100%;height:100%;object-fit:cover} .how-figure{padding: 80px;background: var(--gray-3);border-radius: 20px;} .figure{display:flex;flex-direction:column; align-items: start} .cap{font-size:14px;line-height:24px;color:var(--gray-2);margin-top:12px} .grid2{display:grid;grid-template-columns:1fr;gap:8px} .grid3{display:grid;grid-template-columns:1fr;gap:8px} .grid4{display:grid;grid-template-columns:1fr;gap:8px} .vert{display:grid;gap:20px} .vert .figure{flex-direction: row;} /* feature blurb grid (What I changed) */ .blurbs{display:grid;grid-template-columns:1fr;gap: 40px 120px; margin-bottom:20px} .blurb__t{font-weight:400;font-size:20px;line-height:24px;color:var(--ink);margin-bottom:8px} .blurb__d{font-size:16px;line-height:26px;color:var(--gray-p)} /* impact stats */ .stats{display:flex;flex-wrap:wrap;gap:32px 28px} .stat{flex:1 1 200px;min-width:150px} .stat__num{font-weight: 500;font-size: 32px;;line-height:1;color:var(--blue); text-align: center;} .stat__label{font-size:16px;line-height:24px;color:var(--gray-2);margin-top:16px; text-align: center;} /* phase label (Discover / Define / Develop / Deliver) */ .phase{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14px;line-height:20px;color:var(--gray-p); text-transform: uppercase;} /*.phase::after{content:"";display:inline-block;width:34px;height:10px;border-bottom:2px solid var(--coral);border-radius:0 0 40px 40px;border-left:2px solid var(--coral);border-right:2px solid var(--coral)}*/ .phase-img{width:30px} /* hard part rows */ .hard{display:flex;flex-direction:column;gap:32px} .hard__row{display:flex;flex-direction:column;gap:12px} .hard__t{font-weight:400;font-size:20px;line-height:24px;color:var(--ink)} .hard__d{font-size:16px;line-height:24px;color:var(--gray-p)} /* next project */ .nextproj__inner{border-top:1px solid rgba(17,17,17,.14);padding-top:44px;padding-bottom:20px;display:flex;flex-direction:column;gap:12px} .nextproj__label{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-2)} .nextproj__link{display:inline-flex;align-items:center;gap:18px;font-weight:300;font-size:36px;line-height:1.1;color:var(--ink);width:max-content} .nextproj__link .icon{width:30px;height:30px;transition:transform .3s var(--ease)} .nextproj__link:hover{color:var(--blue)} .nextproj__link:hover .icon{transform:translateX(8px)} @media(min-width:768px){ .proj-hero__inner{gap:40px;padding-bottom:56px} .proj-title{font-size:64px;line-height:70px} .proj-sub{font-size:28px;line-height:38px} .proj-h2{font-size:24px} .proj-cols{flex-direction:row;gap:80px} .grid2{grid-template-columns:1fr 1fr} .grid3{grid-template-columns:1fr 1fr 1fr} .grid4{grid-template-columns:1fr 1fr 1fr 1fr} .gap2{gap:2px !important} .blurbs{grid-template-columns:1fr 1fr; } .nextproj__link{font-size:56px} .proj-sec__inner{padding-bottom: 56px;gap:50px} .koob-page .proj-sec__inner{padding-top:56px;} /* .grid2{gap:20px} .grid3{gap:20px} .grid4{gap:20px}*/ } @media(min-width:1024px){ .proj-title{font-size:72px;line-height:80px} .nextproj__link{font-size:64px} } /* ================================================================== */ /* PROJECT 2 / 3 EXTRA PATTERNS */ /* ================================================================== */ /* callouts / notes */ .callout{color:var(--ink);font-weight:400;font-size:20px;line-height:28px;max-width:960px; margin: 40px auto} .note{display:flex;flex-direction:column;gap:12px;max-width:1000px} .note__k{font-style:italic;font-weight:450;color:var(--blue);font-size:18px} .note__d{font-size:16px;line-height:24px;color:var(--ink)} .text-cont1{margin-top:40px;margin-bottom: 40px; text-align:center;max-width: 520px;} /*.text-cont2{text-align:center; margin-top:80px}*/ .text-cont3{align-items:center;text-align:center; padding-top:80px; padding-bottom:40px} .beav-logo{flex:none} .beav-logo img{max-width:230px;margin:0 auto 40px;} .beav-text{max-width:820px; text-align: left; margin-top:0; color:var(--gray-p)} /* sticky-left / scroll-right split (What I delivered, Design artefacts) */ .split{display:flex;flex-direction:column;gap:40px} .split__left{display:flex;flex-direction:column;gap:24px} .split__left .proj-h2{margin:0} .split__lead{font-size:16px;line-height:24px;color:var(--ink);max-width:520px} .split__right{display:flex;flex-direction:column;gap:64px;min-width:0} .deliver__t,.artefact__cap{font-weight:400;font-size:20px;line-height:24px;color:var(--ink);margin-bottom:16px} .deliver__d{font-size:16px;line-height:24px;color:var(--gray-p);margin-bottom:40px;max-width:520px} /* approach numbered rows */ .approach{display:flex;flex-direction:column;gap:56px} .approach__row{display:flex;flex-direction:column;gap:24px} .approach__media{flex:1;min-width:0} .approach__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px} .numbadge{width:36px;height:36px;flex:none;background:var(--coral-deep);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:400} .approach__h{font-weight:400;font-size:20px;line-height:24px;color:var(--ink);margin-bottom:16px} .approach__p{font-size:16px;line-height:24px;color:var(--gray-p)} /* tracks */ .tracks{display:flex;flex-direction:column;gap:32px} .track__k{font-style:italic;font-weight:500;color:var(--blue); font-size: 16px;margin-bottom: 20px;} .track__d{font-size:16px;line-height:26px;color:var(--gray-p); max-width:400px} /* process list */ .process{display:flex;flex-direction:column;gap:24px} .process__k{font-weight:500;font-size:18px;line-height:24px;color:var(--ink);margin-bottom:8px} .process__i{font-size:16px;line-height:26px;color:var(--gray-2)} /* trade-off rows (label left / text right) */ .tradeoff{display:flex;flex-direction:column;gap:32px} .tradeoff__row{display:flex;flex-direction:column;gap:8px} .tradeoff__k{font-weight:400;font-size:20px;line-height:24px;color:var(--ink)} .tradeoff__d{font-size:16px;line-height:26px;color:var(--gray-p)} /* mission / vision */ .mv{display:flex;flex-direction:column;gap:32px} .mv__item{flex:1;min-width:0} .mv__k{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--ink);margin-bottom:20px} .mv__d{font-size:16px;line-height:24px;color:var(--ink);max-width:480px} /* koob: image loop (crossfade) */ .imgloop{position:relative;width:100%;aspect-ratio:445/667;background:var(--img-bg);overflow:hidden} .imgloop__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);display:flex;align-items:center;justify-content:center;color:var(--gray-2);font-size:13px} .imgloop__slide.is-active{opacity:1} .imgloop__slide img{width:100%;height:100%;object-fit:cover} .openended{display:flex;flex-direction:column;gap:32px; background: var(--gray-3)} .openended__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;padding: 40px;} .openended__text .proj-p{font-size:20px; line-height:28px} .openended__media{flex:none;width:100%} /* koob dance (two stacked layers of 3 cells) */ .dance{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px 0} .dance__stage{position:relative;width:272px;height:125px} .dance__group{position:absolute;inset:0;display:flex;gap:0} .dance__cell{flex:1;border-radius:6px;transition:opacity .5s var(--ease); margin-left:-2px;} .dance__group--back .dance__cell{} .dance__group--front .dance__cell{} .dance__cell.is-hidden{opacity:0} /* koob labels marquee (image loops horizontally) */ .labels{background:var(--white);overflow:hidden;padding:40px 0} /*.labels__track{display:flex;gap:0;will-change:transform} .labels__img{height:600px;width:auto;display:block} .labels__ph{min-width:520px;display:flex;align-items:center;justify-content:center;color:var(--gray-2);font-size:13px;border-right:1px solid rgba(0,0,0,.05);}*/ @media(min-width:768px){ /*.callout{font-size:24px;line-height:34px}*/ .mv{flex-direction:row;gap:120px} .mv__k{font-size:40px} .nextproj__inner{padding-bottom:56px} .dance-cont{margin:40px auto;} .text-cont1{margin: 0 auto 40px auto;} /*.text-cont2{text-align:center; margin-top:80px}*/ /*.text-cont3{align-items:center;text-align:center; padding-top:80px; padding-bottom:40px}*/ } @media(min-width:1024px){ .split{flex-direction:row;gap:80px;align-items:flex-start} .split__left{width:460px;flex:none;position:sticky;top:120px} .split__right{flex:1} .approach__row{flex-direction:row;gap:80px;align-items:center} .tracks{flex-direction:row;gap:20px} .track{flex:1} .tradeoff__row{flex-direction:column;gap:12px} .tradeoff__k{width:445px;flex:none} .tradeoff__d{flex:1} .openended{flex-direction:row;gap:80px;align-items:stretch} .openended__media{width:300px} } /* Resume (download) links: arrow drops down on hover, not right */ /*.nav__link[download]:hover .icon, .scrollnav__link[download]:hover .icon, .footnav__link[download]:hover .icon,*/ .red {color: var(--coral-deep)} .passive__blue {opacity:75%} .mobilemenu__item[download]:hover .icon{transform:translateY(3px)}