﻿<!doctype html >
<html lang="en" >
<head >
<meta charset="utf-8" / >
<meta name="viewport" content="width=device-width, initial-scale=1" / >
<title > Card Component – Orange/Black Theme</title >
<style >
/* === Your existing palette (kept for context if you paste this file alone) === */
:root {
    --bg: #000000; /* deep black */
    --text: #e8e8e8; /* light text */
    --muted: #a7a7a7;
    --orange-600: #ff6a00; /* deep orange (ring) */
    --orange-500: #ff8a00; /* primary orange */
    --orange-400: #ffb14a; /* lighter hover */
    --border: rgba(255,138,0,.25);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

a {
    color: var(--orange-400);
}

    a:hover, a:focus {
        color: #ffd28a;
        text-decoration: none;
    }

/* === Card Component (matches your palette & vibe) === */
.card {
    position: relative;
    background: #0a0a0a; /* slightly lifted from bg for depth */
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.35);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    /* subtle orange edge glow */
    .card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: 16px;
        box-shadow: 0 0 0 1px var(--border) inset;
    }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,138,0,.07), rgba(0,0,0,0));
}

.card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--orange-400);
}

.card-subtitle {
    margin: 0;
    font-size: .875rem;
    color: var(--muted);
    font-weight: 500;
}

.card-body {
    padding: 1.25rem;
    line-height: 1.55;
    color: var(--text);
}

.card-footer {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: #050505;
}

/* Media (image/video) at top */
.card-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 1px solid var(--border);
    background: #111;
}

/* Variants */
.card.clickable {
    cursor: pointer;
}

    .card.clickable:hover {
        transform: translateY(-2px);
        box-shadow: 0 .6rem 1.25rem rgba(0,0,0,.5);
        border-color: rgba(255,138,0,.45);
    }

.card.outlined {
    box-shadow: none;
    background: #050505;
}

.card.elevated {
    box-shadow: 0 1rem 2rem rgba(0,0,0,.55);
}

/* Accent bar variant */
.card.accented .card-header {
    position: relative;
}

    .card.accented .card-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--orange-600), var(--orange-500));
    }

/* Badges & meta */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: #000;
    background: linear-gradient(90deg, var(--orange-600), var(--orange-500));
    border-radius: 999px;
    box-shadow: 0 .15rem .35rem rgba(0,0,0,.35);
}

/* Buttons – align with your .btn-primary idea */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1rem;
    font-weight: 700;
    border-radius: 12px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: filter .15s ease, transform .1s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    color: #000;
    background: linear-gradient(90deg, var(--orange-600), var(--orange-500));
    border-color: var(--orange-600);
}

    .btn-primary:hover {
        filter: brightness(1.06);
    }

.btn-ghost {
    color: var(--orange-400);
    background: transparent;
    border-color: var(--border);
}

    .btn-ghost:hover {
        filter: brightness(1.15);
    }

/* Grid helper for multiple cards */
.card-grid {
    --gap: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
    padding: var(--gap);
    max-width: 1100px;
    margin: 3rem auto;
}

/* Print tweaks – keep card centered and clean */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .card {
        border-color: #ccc;
        box-shadow: none;
        background: #fff;
        color: #000;
    }

    .card-header, .card-footer {
        background: #fff;
    }

    .btn {
        display: none !important;
    }
}

</style >
</head >
<body >
<main class="card-grid" >
<!-- Elevated, clickable card with image -->
<article class="card elevated clickable accented" role="article" >
<img class="card-media" src="https://picsum.photos/seed/orange/800/450" alt="Sample preview" / >
<header class="card-header" >
<div >
<h3 class="card-title" > Orange Pulse</h3 >
<p class="card-subtitle" > Matches your navbar & buttons</p >
</div >
<span class="badge" title="New" > NEW</span >
</header >
<section class="card-body" >
<p >
This card component follows your palette (<strong>#000</strong> background,
          light text, and the orange gradient accent). Borders use <code > var(--border)</code >
and hover states add a subtle lift.
</p >
</section >
<footer class="card-footer" >
<a class="btn btn-ghost" href="#" > Details</a >
<a class="btn btn-primary" href="#" > Get Started</a >
</footer >
</article >
<!-- Outlined, simple content card -->
<article class="card outlined" role="article" >
<header class="card-header" >
<h3 class="card-title" > Minimal Outline</h3 >
</header >
<section class="card-body" >
<p >
Use <code > .outlined</code > for a flatter look that leans on your orange
border color for separation.
</p >
</section >
<footer class="card-footer" >
<a class="btn btn-primary" href="#" > Action</a >
</footer >
</article >
<!-- Compact info card -->
<article class="card clickable" role="article" aria-label="Compact info" >
<header class="card-header" >
<div >
<h3 class="card-title" > Compact Info</h3 >
<p class="card-subtitle" > Subtle gradient header</p >
</div >
</header >
<section class="card-body" >
<ul style="margin:0; padding-left: 1.1rem; color: var(--muted);" >
<li > Dark surface (#0a0a0a) over #000 background</li >
<li > Orange gradient accent + hover lift</li >
<li > Responsive grid via <code > .card-grid</code > </li >
</ul >
</section >
</article >
</main >
</body >
</html >
