app/src/styles/components/_transformers-links.css

/* Transformers-specific link styling */

/* External link capsules */
main a[href^="http://"],
main a[href^="https://"] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    text-decoration: none;
    padding: 0.15em 0.5em;
    border-radius: 12px;
    border: 1px solid #90caf9;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(21, 101, 192, 0.15);
}

main a[href^="http://"]:hover,
main a[href^="https://"]:hover {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-color: #1565c0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}

main a[href^="http://"]:active,
main a[href^="https://"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(21, 101, 192, 0.2);
}

/* Tenet reference links with tooltips */
a[href^="#source-of-truth"],
a[href^="#one-model-one-file"],
a[href^="#code-is-product"],
a[href^="#standardize-dont-abstract"],
a[href^="#do-repeat-yourself"],
a[href^="#minimal-user-api"],
a[href^="#backwards-compatibility"],
a[href^="#consistent-public-surface"],
a[href^="#modular"] {
    position: relative;
    color: #667eea;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

a[href^="#source-of-truth"]:hover,
a[href^="#one-model-one-file"]:hover,
a[href^="#code-is-product"]:hover,
a[href^="#standardize-dont-abstract"]:hover,
a[href^="#do-repeat-yourself"]:hover,
a[href^="#minimal-user-api"]:hover,
a[href^="#backwards-compatibility"]:hover,
a[href^="#consistent-public-surface"]:hover,
a[href^="#modular"]:hover {
    color: #4c51bf;
    text-decoration-color: #4c51bf;
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
}

a[href^="#source-of-truth"]::after { content: "Model implementations should be reliable, reproducible, and faithful to original performances."; }
a[href^="#one-model-one-file"]::after { content: "All inference and training core logic visible, top‑to‑bottom, in a single file."; }
a[href^="#code-is-product"]::after { content: "Optimize for reading, diffing, and tweaking. Code quality matters as much as functionality."; }
a[href^="#standardize-dont-abstract"]::after { content: "Model-specific logic belongs in the model file, not hidden behind abstractions."; }
a[href^="#do-repeat-yourself"]::after { content: "Strategic duplication can improve readability and maintainability when done thoughtfully."; }
a[href^="#minimal-user-api"]::after { content: "Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. Least amount of codepaths."; }
a[href^="#backwards-compatibility"]::after { content: "Any artifact once on the hub must remain loadable. Breaking changes are unacceptable."; }
a[href^="#consistent-public-surface"]::after { content: "Uniform naming, signatures, and conventions across all models for predictability."; }
a[href^="#modular"]::after { content: "Architecture components shared via modular system, removing boilerplate while keeping expanded files visible."; }

a[href^="#source-of-truth"]::after,
a[href^="#one-model-one-file"]::after,
a[href^="#code-is-product"]::after,
a[href^="#standardize-dont-abstract"]::after,
a[href^="#do-repeat-yourself"]::after,
a[href^="#minimal-user-api"]::after,
a[href^="#backwards-compatibility"]::after,
a[href^="#consistent-public-surface"]::after,
a[href^="#modular"]::after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a202c;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: normal;
    white-space: normal;
    width: 300px;
    line-height: 1.4;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 0.5rem;
}

a[href^="#source-of-truth"]:hover::after,
a[href^="#one-model-one-file"]:hover::after,
a[href^="#code-is-product"]:hover::after,
a[href^="#standardize-dont-abstract"]:hover::after,
a[href^="#do-repeat-yourself"]:hover::after,
a[href^="#minimal-user-api"]:hover::after,
a[href^="#backwards-compatibility"]:hover::after,
a[href^="#consistent-public-surface"]:hover::after,
a[href^="#modular"]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Dark mode */
[data-theme="dark"] main a[href^="http://"],
[data-theme="dark"] main a[href^="https://"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #bfdbfe;
    border-color: #3b82f6;
}

[data-theme="dark"] main a[href^="http://"]:hover,
[data-theme="dark"] main a[href^="https://"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border-color: #60a5fa;
}

[data-theme="dark"] a[href^="#source-of-truth"]::after,
[data-theme="dark"] a[href^="#one-model-one-file"]::after,
[data-theme="dark"] a[href^="#code-is-product"]::after,
[data-theme="dark"] a[href^="#standardize-dont-abstract"]::after,
[data-theme="dark"] a[href^="#do-repeat-yourself"]::after,
[data-theme="dark"] a[href^="#minimal-user-api"]::after,
[data-theme="dark"] a[href^="#backwards-compatibility"]::after,
[data-theme="dark"] a[href^="#consistent-public-surface"]::after,
[data-theme="dark"] a[href^="#modular"]::after {
    background: #2d3748;
    color: #e2e8f0;
}

[data-theme="dark"] a[href^="#source-of-truth"],
[data-theme="dark"] a[href^="#one-model-one-file"],
[data-theme="dark"] a[href^="#code-is-product"],
[data-theme="dark"] a[href^="#standardize-dont-abstract"],
[data-theme="dark"] a[href^="#do-repeat-yourself"],
[data-theme="dark"] a[href^="#minimal-user-api"],
[data-theme="dark"] a[href^="#backwards-compatibility"],
[data-theme="dark"] a[href^="#consistent-public-surface"],
[data-theme="dark"] a[href^="#modular"] {
    color: #a5b4fc;
    text-decoration-color: rgba(165, 180, 252, 0.3);
}

[data-theme="dark"] a[href^="#source-of-truth"]:hover,
[data-theme="dark"] a[href^="#one-model-one-file"]:hover,
[data-theme="dark"] a[href^="#code-is-product"]:hover,
[data-theme="dark"] a[href^="#standardize-dont-abstract"]:hover,
[data-theme="dark"] a[href^="#do-repeat-yourself"]:hover,
[data-theme="dark"] a[href^="#minimal-user-api"]:hover,
[data-theme="dark"] a[href^="#backwards-compatibility"]:hover,
[data-theme="dark"] a[href^="#consistent-public-surface"]:hover,
[data-theme="dark"] a[href^="#modular"]:hover {
    color: #c7d2fe;
    background: rgba(165, 180, 252, 0.15);
}