/* ========================================================================= RIGHT CLICK SOFTWARES — THEME Place this file at: public/assets/css/theme.css Loaded after Bootstrap 5 in web.blade.php ========================================================================= */ /* ---- Fonts (loaded via Google Fonts in , see web.blade.php) */ :root { /* Palette */ --ink: #10151F; /* near-black navy — headings, primary text */ --ink-soft: #3A4152; /* secondary text on light */ --muted: #6B7280; /* body copy, slate */ --bg: #FBFBFA; /* page background, warm off-white (not cream) */ --surface: #FFFFFF; /* cards */ --line: #E7E8EC; /* hairline borders */ --primary: #3352FF; /* electric indigo — CTAs, links, accents */ --primary-dark: #1F39D6; --primary-050: #EEF1FF; --accent: #00C896; /* mint — sparse highlight, success, code strings */ --code-bg: #0B0F19; /* hero code window */ --code-line: #1B2233; --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16, 21, 31, .06); --shadow: 0 12px 32px -12px rgba(16, 21, 31, .18); --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink-soft); background: var(--bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; margin: 0; } a { text-decoration: none; color: var(--primary); transition: color .15s ease; } a:hover { color: var(--primary-dark); } ::selection { background: var(--primary); color: #fff; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } .container { max-width: 1240px; } /* ---- Utility: mono eyebrow label, code-comment style -------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .8rem; color: var(--primary); text-transform: none; letter-spacing: 0; margin-bottom: .9rem; } .eyebrow::before { content: "//"; color: var(--accent); font-weight: 600; } .eyebrow--light { color: var(--accent); } .eyebrow--light::before { color: #fff; opacity: .6; } .section-heading { max-width: 640px; margin-bottom: 3rem; } .section-heading h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; } .section-heading p { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; } section { padding: 6rem 0; } @media (max-width:767.98px) { section { padding: 3.5rem 0; } } /* ---- Buttons ------------------------------------------------------------ */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; padding: .7rem 1.5rem; border: 1px solid transparent; display: inline-flex; align-items: center; gap: .5rem; } .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-outline-light-line { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; } .btn-outline-light-line:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; } .btn-outline-ink { background: transparent; border-color: var(--line); color: var(--ink); } .btn-outline-ink:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-sm-icon { padding: .55rem 1.1rem; font-size: .85rem; } /* ========================================================================= HEADER / NAV ========================================================================= */ .topbar { background: var(--ink); color: rgba(255, 255, 255, .75); font-family: var(--font-mono); font-size: .78rem; } .topbar .container { display: flex; align-items: center; justify-content: space-between; padding-block: .5rem; } .topbar a { color: rgba(255, 255, 255, .85); } .topbar a:hover { color: var(--accent); } .topbar .topbar-social a { margin-left: .9rem; color: rgba(255, 255, 255, .6); } .topbar .topbar-social a:hover { color: #fff; } @media (max-width:767.98px) { .topbar .topbar-item+.topbar-item { display: none; } } .site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1030; } .site-header .navbar { padding-block: .9rem; } .brand img { height: 38px; width: auto; } .site-header .navbar-nav .nav-link { font-family: var(--font-mono); font-size: .86rem; color: var(--ink-soft); padding: .5rem 1rem !important; position: relative; } .site-header .navbar-nav .nav-link:hover, .site-header .navbar-nav .nav-link.active { color: var(--ink); } .site-header .navbar-nav .nav-link.active::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .15rem; height: 2px; background: var(--primary); } .site-header .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; } .site-header .dropdown-item { border-radius: var(--radius-sm); font-size: .9rem; padding: .55rem .75rem; } .site-header .dropdown-item:hover { background: var(--primary-050); color: var(--primary); } /* ========================================================================= HERO ========================================================================= */ .hero { background: var(--bg); padding: 5.5rem 0 5rem; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; } .hero .eyebrow { margin-bottom: 1.2rem; } .hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.08; margin-bottom: 1.4rem; } .hero h1 .hl { color: var(--primary); } .hero p.lead { font-size: 1.1rem; color: var(--muted); max-width: 520px; margin-bottom: 2rem; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .hero-actions .trust-note { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); } /* --- signature: code window mockup --- */ .code-window { background: var(--code-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; font-family: var(--font-mono); transform: rotate(.4deg); } .code-window__bar { display: flex; align-items: center; gap: .4rem; padding: .85rem 1rem; background: var(--code-line); } .code-window__bar span { width: 10px; height: 10px; border-radius: 50%; background: #333c52; } .code-window__bar span:nth-child(1) { background: #FF5F57; } .code-window__bar span:nth-child(2) { background: #FEBC2E; } .code-window__bar span:nth-child(3) { background: #28C840; } .code-window__bar .filename { margin-left: .75rem; font-size: .72rem; color: #7C8399; } .code-window__body { padding: 1.6rem 1.5rem; font-size: .86rem; line-height: 1.9; } .code-window__body .ln { color: #4A5268; display: inline-block; width: 1.4rem; user-select: none; } .tok-key { color: #7AA2FF; } .tok-class { color: #F5C766; } .tok-str { color: var(--accent); } .tok-mut { color: #5B6478; } .tok-fn { color: #C79BFF; } .cursor { display: inline-block; width: 7px; height: 1rem; background: var(--accent); vertical-align: middle; margin-left: 2px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .stack-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.5rem 1.5rem; } .stack-chips span { font-family: var(--font-mono); font-size: .72rem; color: #B9C0D4; border: 1px solid #2A3350; border-radius: 99px; padding: .25rem .7rem; } /* ========================================================================= STATS STRIP ========================================================================= */ .stats-strip { background: var(--ink); padding: 0; } .stats-strip .row { --bs-gutter-x: 0; } .stat-cell { padding: 2.4rem 1.5rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, .08); } .stat-cell:last-child { border-right: none; } .stat-cell .count-text, .stat-cell .after { font-family: var(--font-display); font-size: 2.4rem; color: #fff; font-weight: 600; } .stat-cell .count-text { color: var(--accent); } .stat-cell .counter-title { display: block; margin-top: .35rem; font-family: var(--font-mono); font-size: .78rem; color: rgba(255, 255, 255, .6); } @media (max-width:767.98px) { .stat-cell { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); } } /* ========================================================================= WHY CHOOSE US ========================================================================= */ .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; height: 100%; transition: border-color .15s ease, transform .15s ease; } .feature-card:hover { border-color: var(--primary); transform: translateY(-3px); } .feature-card .icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--primary-050); color: var(--primary); font-size: 1.15rem; margin-bottom: 1rem; } .feature-card h5 { font-size: 1.05rem; margin-bottom: .5rem; } .feature-card p { color: var(--muted); font-size: .92rem; margin: 0; } .why-choose-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .why-choose-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================= SERVICES ========================================================================= */ .service-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; height: 100%; position: relative; transition: box-shadow .15s ease, border-color .15s ease; } .service-card:hover { box-shadow: var(--shadow); border-color: transparent; } .service-card .idx { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-bottom: 1rem; display: block; } .service-card h4 { font-size: 1.2rem; margin-bottom: .65rem; } .service-card h4 a { color: var(--ink); } .service-card h4 a:hover { color: var(--primary); } .service-card p { color: var(--muted); font-size: .94rem; margin-bottom: 1.25rem; } .service-card .read-more { font-family: var(--font-mono); font-size: .8rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4rem; } .service-card .read-more i { transition: transform .15s ease; } .service-card:hover .read-more i { transform: translateX(3px); } /* ========================================================================= CLIENTS ========================================================================= */ .clients-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .client-logo { display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; filter: grayscale(1); opacity: .55; transition: opacity .15s ease, filter .15s ease; } .client-logo:hover { filter: none; opacity: 1; } .client-logo img { max-height: 34px; width: auto; } /* ========================================================================= PROCESS (real sequence — numbering justified) ========================================================================= */ .process-row { border-top: 1px solid var(--line); } .process-item { display: flex; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--line); } .process-item .num { font-family: var(--font-mono); font-size: .85rem; color: var(--primary); min-width: 2.5rem; padding-top: .2rem; } .process-item h5 { font-size: 1.1rem; margin-bottom: .4rem; } .process-item p { color: var(--muted); font-size: .92rem; margin: 0; max-width: 640px; } /* grid variant of the working-process section */ .process-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.85rem; height: 100%; position: relative; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .process-card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-3px); } .process-card .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--primary-050); -webkit-text-stroke: 1px var(--primary); line-height: 1; margin-bottom: 1.1rem; display: block; } .process-card .icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-050); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 1rem; } .process-card h5 { font-size: 1.05rem; margin-bottom: .55rem; } .process-card p { color: var(--muted); font-size: .9rem; margin: 0; } .process-card .connector { display: none; } @media (min-width:992px) { .process-card .connector { display: block; position: absolute; top: 2.6rem; left: 100%; width: 1.5rem; height: 1px; background: var(--line); } .process-col:last-child .process-card .connector { display: none; } } /* ========================================================================= TESTIMONIALS ========================================================================= */ .testimonials-band { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 3.5rem; } @media (max-width:767.98px) { .testimonials-band { padding: 2rem 1.25rem; } } .testimonial-slide { padding: .5rem 1rem 1rem; } .testimonial-slide .quote { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.5; color: #fff; margin-bottom: 1.75rem; } .testimonial-slide .quote::before { content: "“"; color: var(--accent); } .testimonial-slide .quote::after { content: "”"; color: var(--accent); } .testimonial-author { display: flex; align-items: center; gap: .85rem; } .testimonial-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .15); } .testimonial-author .name { font-weight: 600; color: #fff; font-size: .95rem; } .testimonial-author .role { font-family: var(--font-mono); font-size: .76rem; color: rgba(255, 255, 255, .55); } #testimonialCarousel .carousel-indicators { position: static; margin-top: 1.5rem; } #testimonialCarousel .carousel-indicators [data-bs-target] { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); opacity: 1; border: none; } #testimonialCarousel .carousel-indicators .active { background: var(--accent); } /* ========================================================================= CTA BAND (foot-top) ========================================================================= */ .cta-band { background: var(--primary); border-radius: var(--radius-lg); padding: 3rem; color: #fff; } @media (max-width:767.98px) { .cta-band { padding: 2rem 1.5rem; text-align: center; } } .cta-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); } .cta-band .contact-line { font-family: var(--font-mono); font-size: .9rem; color: rgba(255, 255, 255, .85); } .cta-band .contact-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .cta-band .btn-primary { background: var(--ink); border-color: var(--ink); } .cta-band .btn-primary:hover { background: #000; border-color: #000; } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { background: var(--ink); color: rgba(255, 255, 255, .6); margin-top: 6rem; } .site-footer .footer-top { padding: 4.5rem 0 3rem; border-bottom: 1px solid rgba(255, 255, 255, .08); } .site-footer .brand img { height: 32px; } .site-footer p { font-size: .9rem; color: rgba(255, 255, 255, .5); max-width: 320px; } .site-footer h6 { font-family: var(--font-mono); color: #fff; font-size: .8rem; letter-spacing: .02em; margin-bottom: 1.1rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { margin-bottom: .65rem; } .site-footer ul li a { color: rgba(255, 255, 255, .6); font-size: .9rem; } .site-footer ul li a:hover { color: var(--accent); } .footer-social { display: flex; gap: .6rem; margin-top: 1.25rem; } .footer-social a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .15); color: #fff; } .footer-social a:hover { background: var(--primary); border-color: var(--primary); } .footer-bottom { padding: 1.4rem 0; font-size: .82rem; } .footer-bottom a { color: rgba(255, 255, 255, .6); } .footer-bottom a:hover { color: #fff; } @media (max-width:575.98px) { .site-footer { margin-top: 4rem; } .site-footer .footer-top { padding: 2.75rem 1.25rem 2rem; text-align: center; } .site-footer .footer-top .col-lg-4, .site-footer .footer-top .col-lg-3, .site-footer .footer-top .col-lg-2, .site-footer .footer-top [class*="col-"] { text-align: center; } .site-footer p { max-width: none; margin-left: auto; margin-right: auto; } .footer-social { justify-content: center; } .site-footer .footer-top { row-gap: 2.5rem; } .site-footer .container { padding-left: 1.25rem; padding-right: 1.25rem; } .footer-bottom { padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); text-align: center; } .footer-bottom .d-flex { text-align: center; } } .scroll-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; border: none; z-index: 1040; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { background: var(--primary); } /* generic breadcrumb/page banner used on inner pages */ .page-banner-area .banner-wrap { background-color: var(--ink); background-image: linear-gradient(90deg, rgba(51, 82, 255, .14) 1px, transparent 1px), linear-gradient(180deg, rgba(51, 82, 255, .14) 1px, transparent 1px); background-size: 36px 36px; } .page-banner-area .page-title { color: #fff; margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); } .page-banner-area .eyebrow { color: var(--accent); } .page-banner-area .eyebrow::before { color: rgba(255, 255, 255, .5); } /* ========================================================================= ABOUT PAGE ========================================================================= */ .about-lead { max-width: 820px; } .about-lead h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.25; } .image-duo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; } .image-duo figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .image-duo figure:last-child { margin-top: 2.5rem; } .image-duo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; } @media (max-width:767.98px) { .image-duo { grid-template-columns: 1fr 1fr; gap: .75rem; } .image-duo figure:last-child { margin-top: 1.5rem; } } .experience-panel { border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; padding: 2.25rem 2.5rem; } .experience-panel p { color: var(--muted); font-size: 1.02rem; margin: 0; } @media (max-width:767.98px) { .experience-panel { padding: 1.5rem; } } .team-card { text-align: center; } .team-card .photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.1rem; aspect-ratio: 1/1; } .team-card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .team-card:hover .photo img { transform: scale(1.05); } .team-card .photo .social-overlay { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: .5rem; padding: .85rem 0; background: linear-gradient(0deg, rgba(16, 21, 31, .85), transparent); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .team-card:hover .photo .social-overlay { opacity: 1; transform: translateY(0); } .team-card .photo .social-overlay a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .15); color: #fff; font-size: .85rem; border: 1px solid rgba(255, 255, 255, .3); } .team-card .photo .social-overlay a:hover { background: var(--primary); border-color: var(--primary); } .team-card .name { font-size: 1.02rem; margin-bottom: .15rem; } .team-card .role { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); } /* ========================================================================= PROJECTS PAGE ========================================================================= */ .project-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; height: 100%; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .project-card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-4px); } .project-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--primary-050); } .project-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .project-card:hover .thumb img { transform: scale(1.06); } .project-card .thumb .idx { position: absolute; top: .85rem; left: .85rem; font-family: var(--font-mono); font-size: .72rem; color: #fff; background: rgba(16, 21, 31, .65); border-radius: 99px; padding: .2rem .65rem; backdrop-filter: blur(2px); } .project-card .body { padding: 1.5rem; } .project-card h4 { font-size: 1.1rem; margin-bottom: .6rem; } .project-card p { color: var(--muted); font-size: .9rem; margin-bottom: 1.1rem; } .project-card .read-more { font-family: var(--font-mono); font-size: .8rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4rem; } .project-card .read-more i { transition: transform .15s ease; } .project-card:hover .read-more i { transform: translate(3px, -3px); } /* ========================================================================= CONTACT PAGE ========================================================================= */ .contact-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; } .contact-info-card+.contact-info-card { margin-top: 1rem; } .contact-info-card .icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--primary-050); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .contact-info-card .label { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); display: block; margin-bottom: .35rem; } .contact-info-card .value { color: var(--ink); font-size: .95rem; margin: 0; } .contact-info-card .value a { color: var(--ink); } .contact-info-card .value a:hover { color: var(--primary); } .contact-form-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); } .contact-form-wrap h4 { font-size: 1.2rem; margin-bottom: 1.5rem; } /* generic overrides so the embedded Livewire form matches the theme without needing to edit the component's own blade view */ .contact-form-wrap form label { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-bottom: .35rem; display: inline-block; } .contact-form-wrap form .form-control, .contact-form-wrap form input[type="text"], .contact-form-wrap form input[type="email"], .contact-form-wrap form input[type="tel"], .contact-form-wrap form input[type="number"], .contact-form-wrap form textarea, .contact-form-wrap form select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); padding: .7rem .9rem; font-size: .92rem; margin-bottom: 1.1rem; font-family: var(--font-body); } .contact-form-wrap form textarea { min-height: 130px; resize: vertical; } .contact-form-wrap form .form-control:focus, .contact-form-wrap form input:focus, .contact-form-wrap form textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); } .contact-form-wrap form button, .contact-form-wrap form .theme-btn, .contact-form-wrap form button[type="submit"] { font-family: var(--font-body); font-weight: 600; font-size: .95rem; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: var(--radius-sm); padding: .75rem 1.75rem; width: auto; } .contact-form-wrap form button:hover { background: var(--primary); border-color: var(--primary); } .contact-form-wrap .invalid-feedback, .contact-form-wrap .text-danger { font-size: .78rem; margin-top: -.85rem; margin-bottom: .9rem; display: block; } .location-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); line-height: 0; } .location-map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.15); } /* ========================================================================= COURSES / TRAINING ========================================================================= */ .badge-pill { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .7rem; padding: .25rem .7rem; border-radius: 99px; color: #fff; } .badge-pill.is-internship { background: var(--accent); color: var(--ink); } .badge-pill.is-course { background: var(--primary); } .course-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; height: 100%; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .course-card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-4px); } .course-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--primary-050); } .course-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .course-card:hover .thumb img { transform: scale(1.06); } .course-card .thumb .badge-pill { position: absolute; top: .85rem; left: .85rem; } .course-card .body { padding: 1.5rem; } .course-card h4 { font-size: 1.1rem; margin-bottom: .6rem; } .course-card h4 a { color: var(--ink); } .course-card h4 a:hover { color: var(--primary); } .course-card p { color: var(--muted); font-size: .9rem; margin-bottom: 1.1rem; } .course-card .read-more { font-family: var(--font-mono); font-size: .8rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4rem; } .course-card .read-more i { transition: transform .15s ease; } .course-card:hover .read-more i { transform: translateX(3px); } /* course detail page */ .course-detail-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.25rem; } .course-detail-media img { width: 100%; display: block; } .course-sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; font-size: .9rem; color: var(--muted); } .course-sidebar a { font-weight: 600; } /* typography wrapper for dynamic {!! !!} rich-text fields (course/service/project details) */ .prose { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; } .prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); color: var(--ink); margin: 1.6em 0 .6em; } .prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin-bottom: 1.1em; } .prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.1em; } .prose li { margin-bottom: .4em; } .prose li::marker { color: var(--primary); } .prose a { text-decoration: underline; text-underline-offset: 2px; } .prose img { max-width: 100%; border-radius: var(--radius); }